Slick carousel kenwheeler - 使 div 仅对幻灯片 2 可见并对其他人隐藏答案

【问题标题】：Slick carousel kenwheeler- making a div visible only for slide 2 and hide for othersSlick carousel kenwheeler - 使 div 仅对幻灯片 2 可见并对其他人隐藏
【发布时间】：2016-02-07 18:12:46
【问题描述】：

我正在尝试制作一个充满其他图像的 div，该图像位于轮播正下方，仅显示来自 kenwheeler 的光滑幻灯片轮播的幻灯片 2 并为其他人隐藏，但我不知道如何在 JS 中定位它.

有人可以帮忙吗？

            <div class="center">
         <div id="day1"><img width="460px" height="460px" src="1_Promotion_460px_new.gif"/>
          <p>DAY 1</p></div>
          <div id="day2"><img width="460px" height="460px" src="2_Promotion_460px_new.gif"/>
          <p>DAY 2</p></div>
          <div id="day3"><img width="460px" height="460px" src="3_Promotion_460px_new.gif"/>
          <p>DAY 3</p></div>
            <div id="day4"><img width="460px" height="460px" src="4_Promotion_460px_new.gif"/>
          <p>DAY 4</p></div>
          <div id="day5"><img width="460px" height="460px" src="5_Promotion_460px_new.gif"/>
          <p>DAY 5</p></div>
          <div id="day6"><img width="460px" height="460px" src="6_Promotion_460px_new.gif"/>
          <p>DAY 6</p></div>
            <div id="day7"><img width="460px" height="460px" src="7_Promotion_460px_new.gif"/>
          <p>DAY 7</p></div>
            <div id="day8"><img width="460px" height="460px" src="8_Promotion_460px_new.gif"/>
          <p>DAY 8</p></div>
          </div>

            <div id="product-container">
                <ul>
                    <li><img src="carousel_03.jpg"/></li>
                    <li><img src="carousel_03.jpg"/></li>
                    <li><img src="carousel_03.jpg"/></li>
                </ul>


            </div>

【问题讨论】：

在轮播中是否有一个钩子可以用于哪个幻灯片处于活动状态？它是否可能在项目上放置一个活动类？您可以使用 jquery 从列表中获取该活动类，当它存在于您想要的项目上时，然后显示您的 div。
基本上当幻灯片在中心时（这是我希望其他 div 只出现的时候），类 ''slick-slide' 将添加类，它会变成 'slick-滑动 slick-current slick-center'。所以我创建了这个jquery，但它不起作用，它为所有幻灯片显示它，而不仅仅是一张。 if($('#day2').hasClass('slick-slide slick-current slick-center')){ $('.product-container').css('display','block'); } else { $('.product-container').css('display','none'); }
1) 您是否在hasClass 检查中尝试了console.log()？ 2）您可以简化您正在查找的类，例如slick-current，可能。 3）你把支票放在你的应用程序的什么地方？具体来说，它是否在文档就绪处理程序中？会自行关闭吗？
我尝试使用准备好的文档，也没有任何东西，我将它放在我的页面顶部。我不知道如何使用 console.log 抱歉，我基本上想做这个网站所做的事情，每张幻灯片都展示了不同的产品，但在我的一些幻灯片上没有产品。 hobbs.co.uk/aw15-lookbook#slide-4
请在您的 jquery 所在的位置发布代码。它周围的一切，因为如果你没有正确地把它放在页面顶部可能是不正确的。

标签： javascript jquery carousel slide slick.js

【解决方案1】：

您可以在 beforeChange 事件中添加一个函数，该事件是光滑滑块 API 的一部分：

$('.your-sliders-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if (nextSlide == 1) {
    $('#product-container').show();
  } else {
    $('#product-container').hide();
  }
});

幻灯片索引从 0 开始，因此第二张幻灯片的索引为 1。不要忘记将“your-sliders-class”替换为您的滑块类...

【讨论】：