Databases
StackOverflow2013
Postsdbo
POCarousel with Thumbnails, add class to next LI as carousel rotates
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCarousel with Thumbnails, add class to next LI as carousel rotates
    text
    copied!<p>I have a carousel with small thumbnails beneath it. I am adding an .isActive class to show a hidden &lt;div> that is positioned over each thumbnail. I can remove the .isActive class from the first thumbnail &lt;div> when the carousel slides the first time. But I have not been able to add .isActive to the next &lt;div></p> <p>How can I match the thumbnail that is selected with the corresponding slide? </p> <p>Here is a fiddle: <a href="http://jsfiddle.net/gybYP/" rel="nofollow">http://jsfiddle.net/gybYP/</a></p> <p>Here is my HTML:</p> <pre><code>&lt;div class="js-carousel"&gt; &lt;div class="slidesContainer"&gt; &lt;ul class="clearfix"&gt; &lt;li class="slide green"&gt;One&lt;/li&gt; &lt;li class="slide blue"&gt;Two&lt;/li&gt; &lt;li class="slide red"&gt;Three&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /slidesContainer --&gt; &lt;div class="thumbnailContainer"&gt; &lt;ul&gt; &lt;li class="thumb green"&gt; &lt;div&gt; &lt;a href="#"&gt; &lt;div class="smallSlide"&gt;&lt;/div&gt; &lt;div class="thumbOverlay isActive"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="thumb blue"&gt; &lt;div&gt; &lt;a href="#"&gt; &lt;div class="smallSlide"&gt;&lt;/div&gt; &lt;div class="thumbOverlay"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="thumb red"&gt; &lt;div&gt; &lt;a href="#"&gt; &lt;div class="smallSlide"&gt;&lt;/div&gt; &lt;div class="thumbOverlay"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- /thumbnailContainer --&gt; &lt;/div&gt; &lt;!-- /js-carousel --&gt; </code></pre> <p>Here's my CSS:</p> <pre><code>.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ } .slidesContainer { width:200px; height: 200px; overflow: hidden; margin-bottom: 10px; } .slidesContainer ul { margin: 0; padding: 0; width: 600px; /* Slides width times total slides */ position: relative; top: 0; left: 0; list-style:none; } .slide { width: 200px; height: 200px; float: left; } .green {background-color: green;} .blue {background-color: blue;} .red {background-color: red;} .thumbnailContainer ul { margin: 0; padding: 0; width: 600px; /* Slides width times total slides */ position: relative; top: 0; left: 0; list-style:none; } .thumb { width: 50px; height: 50px; display: inline-block; position: relative; } .thumbOverlay { background-color: gray; width: 20px; height: 20px; position: absolute; top: 30%; left: 30%; display: none; } .thumbOverlay.isActive { display: block; } </code></pre> <p>Here is my JavaScript:</p> <pre><code>var slide_width = $('.slidesContainer li').outerWidth(); var left_value = slide_width * (-1); $(document).ready(function() { var speed = 3000; var run = setInterval('rotate()', speed); $('.slide:first').before($('.slide:last')); //set the default item to the correct position $('.slidesContainer ul').css({'left' : left_value}); $('.slidesContainer').hover( function() { clearInterval(run); }, function() { run = setInterval('rotate()', speed); } ); }); function rotate() { //get the right position var left_indent = parseInt($('.slidesContainer ul').css('left')) - slide_width; $('.slidesContainer ul').animate( { 'left' : left_indent }, 200, function() { //Remove the class .isActive from the current active thumbnail $('.thumbnailContainer .thumbOverlay.isActive').removeClass('isActive'); //move the first item and put it as last item $('.slidesContainer li:last').after($('.slidesContainer li:first')); //set the default item to correct position $('.slidesContainer ul').css({'left' : left_value}); } ); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload