"Предыдущий / следующий слайд" помещает границу вокруг текущего "предварительного просмотра под основной каруселью"

Question

Использование Slick-Slider:

У меня есть главная карусель с мини-обзором NAV ниже. Это выглядит так:

Что работает до сих пор:

При нажатии на предварительный просмотр все работает хорошо. Основная карусель переходит к тому, что щелкнуло "предварительный просмотр внизу", а граница CSS переходит к текущему "щелчку", по которому щелкают.

Как это устроено:

Я думаю, что это достигается путем перемещения класса.slick-current в основной карусели и в окне предварительного просмотра ниже. Так что в jquery может быть removeClass() и addClass().

Проблема:

При использовании стрелок prev/next основной карусели или пролистывания для перехода к предыдущему или следующему слайду "предварительный просмотр внизу" не обновляет текущий слайд с пурпурной рамкой css из-за того, что класс.slick-current не перемещается к текущему на предварительный просмотр ниже.

Как работает граница css:

В настоящее время у меня есть правило CSS, которое

.slider-nav .slick-current img {
  border: 1px solid #A279B6;
}

Так как класс.slick-current работает при нажатии на предварительный просмотр навигации, тогда применяется граница. Однако это не работает при использовании стрелок предыдущей / следующей основной карусели или смахивания.

Как я пытался решить это:

Я попытался с помощью события onAfterChange() slick-slider, которое принимает параметр (currentSlide). Я использую currentSlide, чтобы получить индекс текущего слайда.

Затем я получаю текущий индекс слайдов "предварительного просмотра" с

activeNavSlide = $(.slider-nav).slick('slickCurrentSlide');

Большой! Я могу console.log и да, я вижу, что, когда я нажимаю на предварительный просмотр навигации, индексы обоих остаются в синхронизации. Однако изменение основной карусели показывает, что основной индекс карусели изменяется, в то время как предварительный просмотр навигации не... из-за того, что.slick-current не перемещается в предыдущий / следующий предварительный просмотр.

Вот мой код до сих пор:

<script type="text/javascript">
  $(document).ready(function(){
    $('.carousel-viewer').slick();
    // Mini Carousel Nav Preview
    console.log($('.slider-nav').children('div').length);
    if($('.slider-nav').children('div').length == 1) {
      $('.slider-nav').addClass('removeNav');
    } else if($('.slider-nav').children('div').length == 2){
      $('.slider-nav').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.carousel-viewer',
        dots: false,
        arrows: false,
        centerMode: true,
        focusOnSelect: true
      });
    } else {
      $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.carousel-viewer',
        dots: false,
        // arrows: false,
        centerMode: true,
        focusOnSelect: true
      });
    }

    //Check to see if index's of both stay in sync
    $('.carousel-viewer').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    activeNavSlide =   $('.slider-nav').slick('slickCurrentSlide');
    activeNavSlide = currentSlide;
    if(activeNavSlide == currentSlide) {
      alert('Match!');
    }
    })
  });
</script>

Я ожидаю, что смогу использовать стрелки предыдущей / следующей основной карусели или проведя пальцем, чтобы переместить класс.slick-current в "предварительном просмотре навигации ниже" и, таким образом, поставить рамку css вокруг текущего синхронизированного индекса.

Ваше мнение очень ценится!

Answer 1

Я предложил jquery, который решает мою проблему и на данный момент работает нормально, но я уверен, что есть более эффективный (более сухой) способ написания этого кода. Хотелось бы получить отзыв о том, как я могу вывести это на следующий уровень!

Я должен был учитывать динамические условия, когда у меня может быть до десяти слайдов, так что вот что у меня пока работает:

<script type="text/javascript">
  $(document).ready(function(){
    $('.carousel-viewer').slick();
    // Mini Carousel Nav Preview
    console.log($('.slider-nav').children('div').length);

    if($('.slider-nav').children('div').length == 1) {
      $('.slider-nav').addClass('removeNav');
    } else {
      $('.slider-nav').slick({
        slidesToShow: $('.slider-nav').children('div').length,
        slidesToScroll: 1,
        asNavFor: '.carousel-viewer',
        dots: false,
        // arrows: false,
        centerMode: true,
        focusOnSelect: true
      });
    }

    // Sync both main slider and nav thumnail(s) slider
    $('.carousel-viewer').on('afterChange', function(event, slick, currentSlide) {

      activeNavSlide =   $('.slider-nav').slick('slickCurrentSlide');
      activeNavSlide = currentSlide;

      console.log('mainSlide is: ' + currentSlide + ' navSlide is: ' + activeNavSlide);

      if($('.slider-nav .slick-track').children('div').length == 10) {

        // FOR TEN PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 9).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 9).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if($('.slider-nav .slick-track').children('div').length == 9) {

        // FOR NINE PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 8).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 8).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if ($('.slider-nav .slick-track').children('div').length == 8) {

        // FOR EIGHT PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 7).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 7).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if ($('.slider-nav .slick-track').children('div').length == 7) {

        // FOR SEVEN PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 6).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 6).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if ($('.slider-nav .slick-track').children('div').length == 6) {

        // FOR SIX PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 5).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 5).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if ($('.slider-nav .slick-track').children('div').length == 5) {

        // FOR FIVE PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 4).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 4).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else if ($('.slider-nav .slick-track').children('div').length == 4) {

        // FOR FOUR PAGES
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 3).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide + 3).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      } else {

        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 2).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide - 1).removeClass('slick-current');
        $('.slider-nav .slick-track').children('div').eq(activeNavSlide).addClass('slick-current');

      }

    })

  });
</script>