title: jQuery Carousel - Onlick of a thumbnail, show a div and hide onclick of next thumbnail
body: <p>Guys i'm using this carousel <a href="http://kenwheeler.github.io/slick/" rel="nofollow">http://kenwheeler.github.io/slick/</a> 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.</p>
  
  <p>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.</p>
  
  <p>I'm a newbie to jQuery. Any help would be great. Here's the code - </p>
  
  <pre><code>&lt;div id="slider-wrap"&gt;
      &lt;div class="container-fluid" style="padding:0px"&gt;
          &lt;div class="slider-for"&gt;
               &lt;div class="single-item"&gt;                                    
                  &lt;div&gt;
                  &lt;p&gt;Buy 20 VCHR get &lt;br/&gt;1 MICROs free&lt;/p&gt;
                  &lt;img class="img-responsive" src="dummyimg/slide-1.jpg" alt=""&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="single-item"&gt;
                  &lt;div&gt;
                  &lt;p&gt;Buy 40 VCHR get &lt;br/&gt;2 MICROs free&lt;/p&gt;
                  &lt;img class="img-responsive" src="dummyimg/slide-2.jpg" alt=""&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="single-item"&gt;
                  &lt;div&gt;
                  &lt;p&gt;Buy 60 VCHR get &lt;br/&gt;3 MICROs free&lt;/p&gt;
                  &lt;img class="img-responsive" src="dummyimg/slide-3.jpg" alt=""&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="single-item"&gt;
                   &lt;div&gt;
                   &lt;p&gt;Buy 80 VCHR get &lt;br/&gt;4 MICROs free&lt;/p&gt;
                   &lt;img class="img-responsive" src="dummyimg/slide-4.jpg" alt=""&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="single-item"&gt;
                   &lt;div&gt;
                   &lt;p&gt;Buy 100 VCHR get &lt;br/&gt;5 MICROs free&lt;/p&gt;
                   &lt;img class="img-responsive" src="dummyimg/slide-5.jpg" alt=""&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class="container-fluid" style="padding:0px"&gt;
            &lt;div class="slider-nav"&gt;
                &lt;div class="slider-nav-single-item"&gt;
                     &lt;div class="white-box"&gt;
                         dfndkjghjn
                         gfjhlf
                     &lt;/div&gt;
                     &lt;p&gt;Buy 20&lt;br/&gt; VCHR get&lt;br/&gt; 1 MICROs&lt;/p&gt;
                     &lt;img class="img-responsive" src="dummyimg/slide-thumb-1.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;div class="slider-nav-single-item"&gt;
                     &lt;div class="white-box"&gt;
                      dfndkjghjn
                      gfjhlf
                     &lt;/div&gt;
                     &lt;p&gt;Buy 20&lt;br/&gt; VCHR get&lt;br/&gt; 1 MICROs&lt;/p&gt;
                     &lt;img class="img-responsive" src="dummyimg/slide-thumb-2.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;div class="slider-nav-single-item"&gt;
                     &lt;div class="white-box"&gt;
                     dfndkjghjn
                     gfjhlf
                     &lt;/div&gt;
                     &lt;p&gt;Buy 20&lt;br/&gt; VCHR get&lt;br/&gt; 1 MICROs&lt;/p&gt;
                     &lt;img class="img-responsive" src="dummyimg/slide-thumb-3.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;div class="slider-nav-single-item"&gt;
                    &lt;div class="white-box"&gt;
                    dfndkjghjn
                    gfjhlf
                    &lt;/div&gt;
                    &lt;p&gt;Buy 20&lt;br/&gt; VCHR get&lt;br/&gt; 1 MICROs&lt;/p&gt;
                   &lt;img class="img-responsive" src="dummyimg/slide-thumb-4.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;div class="slider-nav-single-item"&gt;
                     &lt;div class="white-box"&gt;
                      dfndkjghjn
                      gfjhlf
                     &lt;/div&gt;
                     &lt;p&gt;Buy 20&lt;br/&gt; VCHR get&lt;br/&gt; 1 MICROs&lt;/p&gt;
                     &lt;img class="img-responsive" src="dummyimg/slide-thumb-5.jpg" alt=""&gt;
                &lt;/div&gt;
             &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And here's the jQuery - </p>
  
  <pre><code>$(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();                
          });  
      }); 
  </code></pre>