jQuery Carousel - Onlick of a thumbnail, show a div and hide onclick of next thumbnail

Question

Guys i'm using this carousel http://kenwheeler.github.io/slick/ for one of our office projects. Basically in this carousel, there will be a main slider and small thumbnails below. When you click on the thumbnail, the big image opens up above.

In the thumbnail, there will be a div hidden. When you click on the thumbnail, the div shows up. And when you click on the next thumbnail, the div in the previous thumbnail hides.

I'm a newbie to jQuery. Any help would be great. Here's the code -

<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> 

And here's the 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

This can be achieved like this:

Use jquery data attribute and set the index of each slider image to the thumbnail

<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>

And then on click use

slickGoTo function

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

Try this. Hope this should work. I haven't used this library earlier.