JQuery Vertical Carousel endless scrolling
I am having a minor issue with a vertical scrolling carousel. I am using
JQuery, HTML and CSS for this project. The idea is to make it scroll
endlessly in a vertical motion, it works fine, however on the first
transition it trips from the last child to the second instead of
transitioning from the last to the first, it works properly after the
first transition.
Here is the code and the fiddle at the 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 the link to the fiddle
No comments:
Post a Comment