Databases
StackOverflow2013
Postsdbo
POjQuery Cycle - How to change class of element based on active slide
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Cycle - How to change class of element based on active slide
    text
    copied!<p>I have a sideshow using <a href="http://jquery.malsup.com/cycle/" rel="nofollow">jQuery Cycle</a>. The way it works is that clicking the .next or .prev divs cycles through the slideshow as expected. What I need it to do though is to have it update the UL in .timeline_pagination and add/remove the class 'active' to the corresponding slide. eg. if the #tl_2004 slide is active, the then #goto2004 li needs the class active. I do not want or need the #goto*** to be functional, they're purely there as a display reference.</p> <p>Thanks for your help in advance.</p> <p>Here is the markup:</p> <pre><code>&lt;!-- FAKE PAGINATION --&gt; &lt;div class="timeline_pagination"&gt; &lt;ul&gt; &lt;li class="active" id="goto1994"&gt;1994&lt;/li&gt; &lt;li id="goto2000"&gt;2000&lt;/li&gt; &lt;li id="goto2004"&gt;2004&lt;/li&gt; &lt;li id="goto2007"&gt;2007&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!-- END FAKE PAGINATION --&gt; &lt;div class="timeline_slideshow"&gt; &lt;div class="prev"&gt;&lt;/div&gt; &lt;div class="next"&gt;&lt;/div&gt; &lt;div class="tl_slideshow"&gt; &lt;div id="tl_1994"&gt; &lt;div class="caption"&gt; &lt;h4&gt;title&lt;/h4&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tl_2000"&gt; &lt;div class="caption"&gt; &lt;h4&gt;title&lt;/h4&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tl_2004"&gt; &lt;div class="caption"&gt; &lt;h4&gt;title&lt;/h4&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="tl_2007"&gt; &lt;div class="caption"&gt; &lt;h4&gt;title&lt;/h4&gt; &lt;p&gt;my text&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the javascript:</p> <pre><code>$('.tl_slideshow').cycle({ fx: 'scrollHorz', next: '.next', prev: '.prev', timeout: 0, speed: 750, nowrap: 1, after: onAfter }); function onAfter(curr, next, opts) { var index = opts.currSlide; $('.prev')[index == 0 ? 'fadeOut' : 'fadeIn'](); $('.next')[index == opts.slideCount - 1 ? 'fadeOut' : 'fadeIn'](); } </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