I have a very simple jquery slider that rotates <li>
elements.
Issue #1: I can't figure out how to reverse the sliding direction. Currently slides bottom to top, and I'd like to slide top to bottom.
Issue #2: When run in JSFiddle, it doesn't keep cycling through in CHROME (only cycles once and stops). FireFox and IE work ok. When I run in a different simulator (codepen.io), it seems to work in Chrome.
Issue #3: (because I'm supper jquery newbie) what exactly do I need to put in the HTML file to call the script, and what should I name the script file?
Code:
HTML:
<div id="slider">
<ul>
<li>slide 1</li>
<li>slide 2</li>
<li>slide 3</li>
<li>slide 4</li>
</ul>
</div>
JS:
jQuery(document).ready(function ($) {
setInterval(function () {
move();
}, 1500);
var slideCount = $('#slider ul li').length;
var slideHeight = $('#slider ul li').height();
function move() {
$('#slider ul').animate({bottom: - slideHeight}, 1000, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('bottom', '');
});
};
});
CSS:
body {
background: #888;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto;
background:#fff;
width: 300px;
height: 200px;
}
#slider ul {
position: relative;
list-style: none;
}
#slider ul li {
font-size: 50px;
position: relative;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
}
to run in Chrome
test that code Demo
to use javascript in html click here