Make a Custom Slider Using JQuery
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.userslider
{
margin: 10px 0px;
}
.users
{
display:none;
}
#user1
{
display:block;
}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<ul class="userslider" style="height: 0px; overflow: hidden;">
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/1.jpg" id="user1" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/2.jpg" id="user2" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/3.jpg" id="user3" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/4.jpg" id="user4" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/5.jpg" id="user5" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/6.jpg" id="user6" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/7.jpg" id="user7" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/8.jpg" id="user8" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/9.jpg" id="user9" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/10.jpg" id="user10" style="display: none;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/11.jpg" id="user11" style="display: block;" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/12.jpg" id="user12" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/13.jpg" id="user13" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/14.jpg" id="user14" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/15.jpg" id="user15" />
</li>
<li>
<img class="users" src="http://betadating.ilearnersindia.com/img/slider/16.jpg" id="user16" />
</li>
<div class="clearfloat">
</div>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
setInterval(isrunningslide,4000);
var runningslide = 1;
var divheight = $(".userslider").height();
});
function isrunningslide()
{
var divheight = $(".userslider").height(); console.log(divheight);
// $(".userslider").css('height',divheight);
// $(".userslider").css('overflow','hidden');
runningslide++;
if(runningslide>16)
{
runningslide=1;
}
/* $( ".users" ).fadeOut( 2000, function()
{
$("#user"+runningslide).fadeIn('slow');
}); */
// $(".users").fadeOut('slow');
$("#user"+runningslide).fadeIn('slow');
}
</script></div>
Comments
Post a Comment