120 lines
2.4 KiB
CSS
120 lines
2.4 KiB
CSS
.carousel{
|
|
height: 25em;
|
|
width: 100%;
|
|
margin-bottom: 1em;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.carousel-inner{
|
|
height: 100%;
|
|
/* min-width: 400%; */
|
|
display: flex;
|
|
transition: all ease .5s;
|
|
}
|
|
|
|
.carousel-item{
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.carousel-item h1{
|
|
position: relative;
|
|
color: white;
|
|
bottom: 1.5em;
|
|
}
|
|
.carousel-controls .prev{
|
|
display: inline-block;
|
|
height: 3em;
|
|
width: 3em;
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-image: url('/img/other/svg/prev.svg');
|
|
background-position: center;
|
|
background-size: auto 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
opacity: .5;
|
|
}
|
|
|
|
.carousel-controls .next{
|
|
display: inline-block;
|
|
height: 3em;
|
|
width: 3em;
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-image: url('/img/other/svg/next.svg');
|
|
background-position: center;
|
|
background-size: auto 100%;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
opacity: .5;
|
|
}
|
|
|
|
.prev:hover, .next:hover{
|
|
opacity: 1;
|
|
}
|
|
|
|
.carousel-indicators{
|
|
position: absolute;
|
|
bottom: 4em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.carousel-indicators span{
|
|
display: inline-block;
|
|
background-color: white;
|
|
width: 30px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
opacity: .5;
|
|
cursor: pointer;
|
|
margin: 3px;
|
|
}
|
|
|
|
.carousel-indicators span.active{
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
.carousel-item-first{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_1.png");
|
|
}
|
|
.carousel-item-second{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_2.png");
|
|
}
|
|
.carousel-item-third{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_3.png");
|
|
}
|
|
.carousel-item-fourth{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_4.png");
|
|
}
|
|
.carousel-item-fifth{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_5.png");
|
|
}
|
|
.carousel-item-sixth{
|
|
background-image: url("/img/carousel/DAVO_Web_slide_6.png");
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 991px){
|
|
.prev, .next{
|
|
height: 1em !important;
|
|
width: 1em !important;
|
|
}
|
|
} |