上一张/下一张幻灯片在当前“主轮播下方的导航预览”周围设置边框
Posted
技术标签:
【中文标题】上一张/下一张幻灯片在当前“主轮播下方的导航预览”周围设置边框【英文标题】：Prev/Next Slide puts a border around current 'Nav Preview below Main Carousel' 【发布时间】：2019-06-16 14:12:43 【问题描述】：使用 Slick-Slider：
我有一个主轮播，其下方有一个迷你“导航预览”。它看起来像这样：
目前的工作情况：
点击导航预览时一切正常。主轮播转到单击的“下方导航预览”，CSS 边框跳转到单击/当前的“导航预览”。
工作原理：
我认为这是通过在下面的主轮播和导航预览上移动 .slick-current 类来实现的。所以在 jquery 中可能是 removeClass() 和 addClass()。
问题：
当使用主轮播的上一个/下一个箭头或滑动到上一个或下一张幻灯片时，由于 .slick-current 类没有被移动到，“下面的导航预览”不会用 CSS 紫色边框更新当前幻灯片当前在“下面的导航预览”中。
到目前为止，css 边框是如何工作的：
目前，我有一个 CSS 规则是
.slider-nav .slick-current img
border: 1px solid #A279B6;
由于 .slick-current 类在单击导航预览时有效，因此会应用边框。但是，当使用主轮播的上一个/下一个箭头或滑动时，这不起作用。
我是如何解决这个问题的：
我尝试使用带有参数 (currentSlide) 的 slick-slider onAfterChange() 事件。我使用 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 边框。
非常感谢您的反馈！
【问题讨论】：
【参考方案1】：我想出了一些 jquery 来解决我的问题并且现在可以正常工作，但我确信有一种更有效（更干燥）的方式来编写此代码。希望能得到一些反馈，告诉我如何将它提升到一个新的水平！
我必须考虑到动态条件，我可能有多达 10 张幻灯片，所以这是我目前所拥有的：
<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>
【讨论】：
以上是关于上一张/下一张幻灯片在当前“主轮播下方的导航预览”周围设置边框的主要内容，如果未能解决你的问题，请参考以下文章