simple jquery slider - (1) Reverse slide direction and (2) Chrome compatible

1.2k Views Asked by At

I have a very simple jquery slider that rotates <li> elements.

http://jsfiddle.net/cQdTq/9/

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;
}
1

There are 1 best solutions below

2
On

to run in Chrome

jQuery(document).ready(function ($) {

     var interval = setInterval(function () {
        move();
    }, 1500);


    var slideCount = $('#slider ul li').length;
    var slideHeight = $('#slider ul li').height();

    function move() {
        $('#slider ul').animate({
            top: - slideHeight
        }, 1500, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('top', '');
        });
    };

});   

test that code Demo

to use javascript in html click here