100 lines
2.1 KiB
CSS
Executable File
100 lines
2.1 KiB
CSS
Executable File
/*--------------------------------------------------------------
|
|
# Slider
|
|
--------------------------------------------------------------*/
|
|
.slider {height:auto; position:relative;}
|
|
.slider .slide {
|
|
height:auto;
|
|
}
|
|
.slick-slider .slick-track, .slick-slider .slick-list, .slider .slide {height:100%;}
|
|
.slider .slide img {width:100%; height:100%; object-fit:cover;}
|
|
|
|
/* Arrows */
|
|
.slider .slick-prev, .slider .slick-next {
|
|
position:absolute;
|
|
top:50%;
|
|
height:50px;
|
|
width:50px;
|
|
margin-top:-25px;
|
|
z-index:1000;
|
|
cursor: pointer;
|
|
color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
background: #b1b1b1;
|
|
opacity:0;
|
|
-webkit-opacity:0;
|
|
-moz-opacity:0;
|
|
visibility:hidden;
|
|
transition:all 0.3s;
|
|
display:flex;
|
|
display:-webkit-flex;
|
|
align-items:center;
|
|
justify-content: center;
|
|
text-align:center;
|
|
}
|
|
.slider:hover .slick-prev, .slider:hover .slick-next {
|
|
opacity:1;
|
|
-webkit-opacity:1;
|
|
-moz-opacity:1;
|
|
visibility:visible;
|
|
}
|
|
.slider .slick-prev {left:20px;}
|
|
.slider .slick-next {right:20px;}
|
|
|
|
.slider .slick-prev:before, .slider .slick-next:before {
|
|
font-family: 'FontAwesome';
|
|
color:#000;
|
|
font-size:40px;
|
|
position:absolute;
|
|
display:block;
|
|
width:100%;
|
|
}
|
|
.slider .slick-prev:before {
|
|
content:"\f104";
|
|
padding-right:3px;
|
|
}
|
|
.slider .slick-next:before {
|
|
content:"\f105";
|
|
padding-left:1px;
|
|
}
|
|
|
|
.white_arrows .slick-prev:before, .white_arrows .slick-next:before {color:#FFF;}
|
|
|
|
/* Dots */
|
|
.slider .slick-dots {
|
|
width:100%;
|
|
position:absolute;
|
|
bottom:10px;
|
|
display:flex;
|
|
display:-webkit-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
list-style-type:none;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
.slider .slick-dots li {
|
|
width:15px;
|
|
height:15px;
|
|
margin:0 10px;
|
|
background:#b1b1b1;
|
|
cursor:pointer;
|
|
}
|
|
.slider .slick-dots li button {
|
|
color: transparent;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
width:100%;
|
|
height:100%;
|
|
cursor:pointer;
|
|
}
|
|
.slider .slick-dots li.slick-active {background:#464645;}
|
|
|
|
|
|
@media(min-width:768px) {
|
|
.slider .slick-dots {
|
|
bottom:70px;
|
|
}
|
|
.slider {height:340px;}
|
|
} |