jQuery Carousel - 单击缩略图时，显示一个 div 并隐藏下一个缩略图的单击答案

【问题标题】：jQuery Carousel - Onlick of a thumbnail, show a div and hide onclick of next thumbnailjQuery Carousel - 单击缩略图时，显示一个 div 并隐藏下一个缩略图的单击
【发布时间】：2015-03-31 15:37:59
【问题描述】：

伙计们，我正在使用这个旋转木马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();                
        });  
    });

【问题讨论】：

标签： javascript jquery

【解决方案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) ); 
  });

试试这个。希望这应该有效。我之前没有使用过这个库。

【讨论】：