上一张/下一张幻灯片在当前的“主轮播下方的导航预览”周围放置边框

Question

使用滑动滑块：

我有一个主旋转木马，下面有一个迷你“ NAV PREVIEW”。看起来像这样：

目前正在做什么：

单击导航预览时，所有效果都很好。轮播会转到被单击的“下面的导航预览”中的任何一个，并且CSS边框会跳至被单击/当前的“导航预览”。

工作原理：

我认为可以通过在下面的主要轮播和nav预览上移动.slick-current类来实现。因此在jquery中，可能是removeClass（）和addClass（）。

问题：

当使用主轮播的上一个/下一个箭头或滑动到上一张或下一张幻灯片时，“。slick-current”类未移至“下面的导航预览”不会用css紫色边框更新当前幻灯片。当前在“下面的导航预览”上。

到目前为止，css边框如何工作：

当前，我有一个css规则，

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

由于单击导航预览时类.slick-current有效，因此将应用边框。但是，在使用主轮播的上一个/下一个箭头或滑动时，此操作无效。

我如何尝试解决此问题：

我尝试使用带有参数（currentSlide）的滑动滑块 onAfterChange（）事件。我使用currentSlide来获取当前幻灯片的索引。

接下来，我将使用

获取“导航预览”的当前幻灯片索引

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

太好了！我可以console.log，是的，我看到当单击导航预览时，两者的索引保持同步。但是，从主要轮播更改后，发现主要轮播索引发生了变化，而nav预览没有...由于.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>