IT и около

Несколько Slick slider на странице с счетчиками слайдов

пост
20 Августа 2018

Была задача разместить на странице несколько Slick slider с счетчиками слайдов. Итак, код:

$(window).on("load", function() { // Executes when complete page is fully loaded, including // all frames, objects and images // Слайдеры на страницах var $slickElement = $('.js-slider'); $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) { //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based) var i = (currentSlide ? currentSlide : 0) + 1; $(this).parent().parent().find('.img-count').text(i + '/' + slick.slideCount); }); $slickElement.not('.slick-initialized').slick({ slideToShow: 1, autoplay: false, dots: false, arrows: false, }); $('.js-slide-b.next').click(function () { $(this).parent().find('.js-slider').slick('slickNext'); }); $('.js-slide-b.prev').click(function () { $(this).parent().find('.js-slider').slick('slickPrev'); });

И лечим баг, когда слайдов несколько, и второй и следующие не видят кол-во слайдов без пролистывания:

function createSlick(){ $(".slider").not('.slick-initialized').slick({ autoplay: true, dots: true, responsive: [{ breakpoint: 500, settings: { dots: false, arrows: false, infinite: false, slidesToShow: 2, slidesToScroll: 2 } }]}); } createSlick(); //Now it will not throw error, even if called multiple times.$(window).on( 'resize', createSlick );

И разметка:

|div class="img-wrapper animation"||!-- Блок-слайдер --||/div| |div class="img-count"|0/0|/div| |p||!-- Кол-во не править, скрипт поставит сам --||/p| |div class="img-area"||/div| |p||img src="/img/01/02/11.jpg" alt="" /| |img src="/img/01/02/12.jpg" alt="" /| |/p| |div class="js-slide-b slide-b next"||/div| |div class="js-slide-b slide-b prev"||/div| |p||/p| |div class="img-caption"||/div| |p|Описание|/p|

tag
Добро пожаловать!
Имя пользователя
Заполните поле
Пароль
Заполните поле