Стрелочки рядом с переключателяи пагинации в slick slider
В slick slider эти навинационные кнопки прописаны через абсолютное позиционирование. По структуре находятся в разных блоках с навигацией. Подгонять расположение кнопок помогало только при фиксированном кол-ве элементов в слайдере. Было решено что-то придумать, не особо костыльное, но чтобы четко работало.
Идея в следующем — на JavaScript'е обернуть элементы пагинации в дополнительный контейнер, в него же поместить элементы отвечающие за прокрутку влево и вправо.
Написал вот такую функцию:
setArrows = function(selector) {
$(selector+" .slick-dots").wrap("<div class='slick-dots__wrapper'></div>");
$(selector+" .slick-dots__wrapper").prepend('<span class="slick-dots-prev"></span>');
$(selector+" .slick-dots__wrapper").append('<span class="slick-dots-next"></span>');
$(selector+' .slick-dots-prev').on('click', function(){
$(selector).slick('slickPrev');
});
$(selector+' .slick-dots-next').on('click', function(){
$(selector).slick('slickNext');
});
};
Добавляем ее к вызову инициализации слайдера
var main_product_slider = false;
initMainProductSlider = function() {
selector = '.product-slider';
if ($(window).width()<1050) {
if (!main_product_slider) {
$(selector).slick({
'autoplay': false,
'arrows': false,
'dots': true,
'slidesToShow': 3,
'slidesToScroll': 1,
'initialSlide': 1,
'infinite': false,
'adaptiveHeight': true,
'responsive': [
{
breakpoint: 750,
settings: {
vertical: false,
dots: false,
slidesToShow:2
}
},
{
breakpoint: 450,
settings: {
vertical: false,
dots: true,
slidesToShow: 1
}
}
]
});
setArrows(selector);
$(selector).on('breakpoint', function(event, slick, direction){
setArrows(selector);
});
main_product_slider = true;
}
} else {
if (main_product_slider) {
$(selector).slick('unslick');
main_product_slider = false;
}
}
};
Для правильного отображения стрелочек добавляем стили. Кусок из scss файла
.slick-dots{
&__wrapper{
position: absolute;
bottom: -30px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
.slick-dots{
position: relative;
bottom: auto;
display: inline-block;
width: auto;
line-height: 10px;
vertical-align: middle;
}
.slick-dots-prev{
height: 10px;
display: inline-block;
vertical-align: middle;
position: relative;
cursor: pointer;
margin-right: 4px;
line-height: 10px;
&:before{
display: inline-block;
content: "";
@include sprite($arrow-slider);
transform: rotate(180deg);
}
}
.slick-dots-next{
height: 10px;
display: inline-block;
vertical-align: middle;
position: relative;
cursor: pointer;
margin-left: 4px;
line-height: 10px;
&:before{
display: inline-block;
content: "";
@include sprite($arrow-slider);
}
}
}
Нет комментариев