jQuery Carousel-缩略图的Onlick，显示div并隐藏下一个缩略图的onclick

Question

伙计们，我正在将此旋转木马http://kenwheeler.github.io/slick/用于我们的一个办公项目。 基本上，在此轮播中，下面会有一个主滑块和一些小缩略图。 单击缩略图时，大图将在上方打开。

在缩略图中，将隐藏一个div。 单击缩略图时，将显示div。 当您单击下一个缩略图时，上一个缩略图中的div会隐藏。

我是jQuery的新手。 任何帮助都会很棒。 这是代码-

<div id="slider-wrap">
    <div class="container-fluid" style="padding:0px">
        <div class="slider-for">
             <div class="single-item">                                    
                <div>
                <p>Buy 20 VCHR get <br/>1 MICROs free</p>
                <img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
                </div>
             </div>
             <div class="single-item">
                <div>
                <p>Buy 40 VCHR get <br/>2 MICROs free</p>
                <img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
                </div>
             </div>
             <div class="single-item">
                <div>
                <p>Buy 60 VCHR get <br/>3 MICROs free</p>
                <img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
                </div>
             </div>
             <div class="single-item">
                 <div>
                 <p>Buy 80 VCHR get <br/>4 MICROs free</p>
                 <img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
                 </div>
             </div>
             <div class="single-item">
                 <div>
                 <p>Buy 100 VCHR get <br/>5 MICROs free</p>
                 <img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
                 </div>
             </div>
         </div>
     </div>

     <div class="container-fluid" style="padding:0px">
          <div class="slider-nav">
              <div class="slider-nav-single-item">
                   <div class="white-box">
                       dfndkjghjn
                       gfjhlf
                   </div>
                   <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
                   <img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
              </div>
              <div class="slider-nav-single-item">
                   <div class="white-box">
                    dfndkjghjn
                    gfjhlf
                   </div>
                   <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
                   <img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
              </div>
              <div class="slider-nav-single-item">
                   <div class="white-box">
                   dfndkjghjn
                   gfjhlf
                   </div>
                   <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
                   <img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
              </div>
              <div class="slider-nav-single-item">
                  <div class="white-box">
                  dfndkjghjn
                  gfjhlf
                  </div>
                  <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
                 <img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
              </div>
              <div class="slider-nav-single-item">
                   <div class="white-box">
                    dfndkjghjn
                    gfjhlf
                   </div>
                   <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
                   <img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
              </div>
           </div>
     </div>
</div> 

这是jQuery-

$(document).ready(function () {
        $('.slider-for').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            arrows: false,
            asNavFor: '.slider-nav',
            mobileFirst: true,
            respondTo: true,
        });

        $('.slider-nav').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            centerMode: true,
            centerPadding: '17%',
            arrows: false,
            focusOnSelect: true,
            mobileFirst: true,
            respondTo: true,
        });

        $('.single-item').slick({
            dots: false,
            arrows: false,
            mobileFirst: true,
            respondTo: true,
        });
    });


    $(document).ready(function () {            
        $('.slider-nav-single-item').click(function () {
            $(this).children().show();                
        });  
    }); 

Answer 1

可以这样实现：

使用jquery数据属性并将每个滑块图像的索引设置为缩略图

<div id="slider-wrap">
<div class="container-fluid" style="padding:0px">
    <div class="slider-for">
         <div class="single-item">                                    
            <div>
            <p>Buy 20 VCHR get <br/>1 MICROs free</p>
            <img class="img-responsive" src="dummyimg/slide-1.jpg" alt="">
            </div>
         </div>
         <div class="single-item">
            <div>
            <p>Buy 40 VCHR get <br/>2 MICROs free</p>
            <img class="img-responsive" src="dummyimg/slide-2.jpg" alt="">
            </div>
         </div>
         <div class="single-item">
            <div>
            <p>Buy 60 VCHR get <br/>3 MICROs free</p>
            <img class="img-responsive" src="dummyimg/slide-3.jpg" alt="">
            </div>
         </div>
         <div class="single-item">
             <div>
             <p>Buy 80 VCHR get <br/>4 MICROs free</p>
             <img class="img-responsive" src="dummyimg/slide-4.jpg" alt="">
             </div>
         </div>
         <div class="single-item">
             <div>
             <p>Buy 100 VCHR get <br/>5 MICROs free</p>
             <img class="img-responsive" src="dummyimg/slide-5.jpg" alt="">
             </div>
         </div>
     </div>
 </div>

 <div class="container-fluid" style="padding:0px">
      <div class="slider-nav">
          <div class="slider-nav-single-item" data-slide-index="0">
               <div class="white-box">
                   dfndkjghjn
                   gfjhlf
               </div>
               <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
               <img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt="">
          </div>
          <div class="slider-nav-single-item" data-slide-index="1">
               <div class="white-box">
                dfndkjghjn
                gfjhlf
               </div>
               <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
               <img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt="">
          </div>
          <div class="slider-nav-single-item" data-slide-index="2">
               <div class="white-box">
               dfndkjghjn
               gfjhlf
               </div>
               <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
               <img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt="">
          </div>
          <div class="slider-nav-single-item" data-slide-index="3">
              <div class="white-box">
              dfndkjghjn
              gfjhlf
              </div>
              <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
             <img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt="">
          </div>
          <div class="slider-nav-single-item" data-slide-index="4">
               <div class="white-box">
                dfndkjghjn
                gfjhlf
               </div>
               <p>Buy 20<br/> VCHR get<br/> 1 MICROs</p>
               <img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt="">
          </div>
       </div>
 </div>

然后点击使用

slickGoTo函数

  $('.slider-nav-single-item').click(function () {
        var index = $(this).data('slideIndex'); 
        $( '.slider-for' ).slickGoTo( parseInt(index) ); 
  });  

尝试这个。 希望这应该工作。 我以前没有使用过这个库。