I have a sideshow using jQuery Cycle . 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.
Thanks for your help in advance.
Here is the markup:
<!-- FAKE PAGINATION -->
<div class="timeline_pagination">
<ul>
<li class="active" id="goto1994">1994</li>
<li id="goto2000">2000</li>
<li id="goto2004">2004</li>
<li id="goto2007">2007</li>
</ul>
</div>
<!-- END FAKE PAGINATION -->
<div class="timeline_slideshow">
<div class="prev"></div>
<div class="next"></div>
<div class="tl_slideshow">
<div id="tl_1994">
<div class="caption">
<h4>title</h4>
<p>my text</p>
</div>
</div>
<div id="tl_2000">
<div class="caption">
<h4>title</h4>
<p>my text</p>
</div>
</div>
<div id="tl_2004">
<div class="caption">
<h4>title</h4>
<p>my text</p>
</div>
</div>
<div id="tl_2007">
<div class="caption">
<h4>title</h4>
<p>my text</p>
</div>
</div>
</div>
</div>
Here is the javascript:
$('.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']();
}
Try with this jquery code
var PREFIX_ID_PAGINATION = "goto";
var PREFIX_ID_SLIDESHOW = "tl_";
$('.tl_slideshow').cycle({
fx: 'scrollHorz',
next: '.next',
prev: '.prev',
timeout: 0,
speed: 750,
nowrap: 1,
after: onAfter
});
function onAfter(prev, current, opts) {
var index = opts.currSlide;
$('.prev')[index == 0 ? 'fadeOut' : 'fadeIn']();
$('.next')[index == opts.slideCount - 1 ? 'fadeOut' : 'fadeIn']();
var current_id = $(current).attr('id');
if( current_id.match("^" + PREFIX_ID_SLIDESHOW + "[0-9]+$")){
$('li.active').removeClass('active');
$('#' + PREFIX_ID_PAGINATION + current_id.replace(PREFIX_ID_SLIDESHOW,"")).addClass('active');
}
}
There is a jsfiddle example here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.