Friday, 15 May 2015

javascript - Custom jQuery slider with infinite loop -



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