html - JQuery Vertical Carousel endless scrolling -
i having minor issue vertical scrolling carousel. using jquery, html , css project. idea make scroll endlessly in vertical motion, works fine, on first transition trips last child second instead of transitioning last first, works after first transition.
here code , fiddle @ end:
the html:
<div id='carousel_container'> <div id='carousel_inner'> <ul id='carousel_ul'> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_1.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_2.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_3.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_4.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_5.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_6.png' /></a></li> <li><a href='#'><img src='http://e-home.mx/html5/img/carousel_7.png' /></a></li> </ul> </div> </div> the css:
#carousel_container { position: absolute; bottom:26px; right:0; } #carousel_inner { width:210px; height:120px; overflow: hidden; background: rgba(0, 0, 0, .8); } #carousel_ul { position: relative; top: 0px; list-style-type: none; margin: 0px; padding: 0 0 10px 0; height:1000px; width:210px; } #carousel_ul li { width: 200px; padding: 0px; height: 110px; margin: 10px 5px; } #carousel_ul li img { cursor: pointer; cursor: hand; border: 0px; margin-bottom: -4px; } the jquery / js:
var car_ul = $('#carousel_ul'); car_ul.find('li').first().before(car_ul.find('li').last()); function scroll_down() { $('#carousel_ul:not(:animated)').animate({ 'top': parseint(car_ul.css('top')) - car_ul.find('li').outerheight() - 10 }, 500, function () { var cars = car_ul.find('li'); car_ul.css({ 'top': '-120px' }); cars.last().after(cars.first()); }); } var interval_id = setinterval(function () { scroll_down(); }, 5000); and lastly link fiddle
car_ul.css({ 'top': '+=120px' }); 
Comments
Post a Comment