Question

我正在尝试制作一个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>

Answer 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。别忘了用滑块的类替换“你的滑块级”......

光滑的旋转木马kenwheeler-只为幻灯片2显示div并为其他人隐藏

1 个答案: