Jquery SLider Demo

by Sreekesh S K

HTML

<div data-role="page" id="index">
        <div data-theme="a" data-role="header">


        <div data-role="content">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
                </li>
                <li>
                  <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
                </li>
                <li>
                  <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
                </li>
                <li>
                  <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
                </li>
              </ul>
            </div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

CSS

.flexslider {
    height: 500px;
    display: inline-block;
    overflow: hidden;
}

JavaScript

/*https://matthewlein.com/experiments/easing.html*/
var refreshId = setInterval(test, 1000);

var count=0;

function test(){
alert(count)
$($('.flexslider').children('ul').children('li')[count]).slideToggle(100,"linear");
count++;
$($('.flexslider').children('ul').children('li')[count]).slideToggle(100,"linear");


	
  
if(count == $('.flexslider').children('ul').children('li').length){count=0;}	

}