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

var refreshId = setInterval(test, 100);

var count=0;
if(count > $('.flexslider ul li').length){count=0;}	
function test(){
alert(count)
$('.flexslider').children('ul').children('li').fadeOut();
$($('.flexslider').children('ul').children('li')[count]).fadeIn();


	count++;


}