Блог

Главная - Вопросы по программированию - Slick slider — добавить класс перед li.slick-активная точка

Slick slider — добавить класс перед li.slick-активная точка

#jquery #slick.js

#jquery #slick.js

Вопрос:

У меня есть слайдер Slick (#my-slider), и я хочу добавить класс (.past) ко всем элементам li .slick-dots перед li .slick-активным.

как это выглядит в настоящее время введите описание изображения здесь

как я хочу, чтобы это выглядело введите описание изображения здесь

Я попробовал следующее:

 (function ($) {
    jQuery(document).ready(function () {
        $('#my-slider').on('init', function(event, slick){
           var $items = slick.$dots.find('li.slick-active').prevAll();
           $items.addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

и этот

 (function ($) {
    jQuery(document).ready(function () {
         $('#my-slider').on('init', function(event, slick){
           $('#my-slider .slick-dots li.slick-active').prevAll().addClass('past');
        });

        $('#my-slider').slick({
          dots: true,
          arrows: true,
          infinite: false,
          speed: 500,
          fade: true,
          autoplay: false,
          cssEase: 'linear'
        });
    });
})(jQuery);

Но не повезло.

Слайдер работает, но он вообще не выдает прошлый класс.

Комментарии:

1. Если вы используете initialSlide настройку, первый слайд будет активным, и у вас не будет предыдущих слайдов. Возможно, вы захотите вызвать свою функцию beforeChange вместо init , чтобы добавить класс к currentSlide значению, прежде чем оно перейдет к следующему слайду.

Ответ №1:

Вы можете использовать beforeChange событие slick для добавления / удаления .past классов во всех точках, используя nextSlide значение.

Примечание: вам не нужно использовать jQuery(document).ready(function () { }); inside (function ($) { })(jQuery); . Первая функция является сокращением для doc ready, поэтому вы вызываете doc ready дважды. Удалить jQuery(document).ready(function () { }); , поскольку это не нужно.

Смотрите Живую демонстрацию ниже, чтобы узнать о вашей проблеме с комментариями в коде…

 // our slick mySlider
let mySlider = $('#my-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true,
  pauseOnHover: false,
  pauseOnFocus: false,
  autoplaySpeed: 1000
});

// our mySlider dots
let dots = $('.slick-dots > LI', mySlider);

// before mySlider change slick event
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  // remove dot past classes on dots after next slide dot
  $(dots[nextSlide]).nextAll().removeClass('past');
  
  // add dot past classes on dots before next slide dot
  $(dots[nextSlide]).prevAll().addClass('past');
    
}); 
 /* my-slider dots active and past css */

#my-slider .slick-dots LI.slick-active BUTTON::before,
#my-slider .slick-dots LI.slick-active BUTTON:focus {
  color: red;
  opacity: 1 !important;
}

#my-slider .slick-dots LI.past BUTTON::before,
#my-slider .slick-dots LI.past BUTTON:focus {
  opacity: 1;
}

#my-slider .slick-dots LI:not(.past) BUTTON:focus {
  opacity: .25;
}

/* my-slider demo css not needed */

BODY {
  margin: 0;
  padding: 20px;
}

#my-slider FIGURE {
  height: 120px;
  margin: 0;
  display: block;
  border: 1px solid black;
} 
 <div id="my-slider">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Вот и версия для скрипки: https://jsfiddle.net/joshmoto/mbrs3t9v/17 /

Комментарии:

1. Спасибо. Работает как шарм 🙂 Комбинация beforeChange и nextSlide выполнила свою работу. Также благодарим вас за разъяснение «готово к документу».

2. Не беспокойтесь, фокус css может привести к хаосу в активных состояниях паузы, но это тоже относится к этому

Метки: