javascript - Custom jQuery slider with infinite loop -
i've written custom slider site im working on im struggling problem of how create slideshow loop, when slider loads, if click left go the lastly element if makes sense?
$('.leftslide').click(function (e) { e.preventdefault(); if ($('.landingpagebanner .active').is(':first-child')) return; $('.landingpagebanner .active').removeclass('active').prev().addclass('active'); var newh1 = $('.landingpagebanner ul li.active').data('heading'); var newp = $('.landingpagebanner ul li.active').data('paragraph'); var newa = $('.landingpagebanner ul li.active').data('link'); $('.mask h1').html(newh1); $('.mask p').html(newp); $('.mask .view-sector').attr('href', newa); }); $('.rightslide').click(function (e) { e.preventdefault(); if ($('.landingpagebanner .active').is(':last-child')) return; $('.landingpagebanner .active').removeclass('active').next().addclass('active'); var newh1 = $('.landingpagebanner ul li.active').data('heading'); var newp = $('.landingpagebanner ul li.active').data('paragraph'); var newa = $('.landingpagebanner ul li.active').data('link'); $('.mask h1').html(newh1); $('.mask p').html(newp); $('.mask .view-sector').attr('href', newa); });
http://jsfiddle.net/3ss62/3/
if you're on first kid of slideshow, want activate lastly kid when wrap around while clicking 'left' link:
$('.leftslide').click(function (e) { e.preventdefault(); if ($('.landingpagebanner .active').is(':first-child')) { $('.landingpagebanner .active').removeclass('active').siblings(':last-child').addclass('active'); } else { $('.landingpagebanner .active').removeclass('active').prev().addclass('active'); }
similarly, when clicking 'right' link:
$('.rightslide').click(function (e) { e.preventdefault(); if ($('.landingpagebanner .active').is(':last-child')) { $('.landingpagebanner .active').removeclass('active').siblings(':first-child').addclass('active'); } else { $('.landingpagebanner .active').removeclass('active').next().addclass('active'); }
http://jsfiddle.net/mblase75/75fqx/
javascript jquery
No comments:
Post a Comment