i have created simple slider for my site , It is working fine demo here http://jsfiddle.net/Kxnh3/1/
Now i want to work this slider auto ? any idea ?
jQuery(document).ready(function() {
jQuery('.sliderBtn li:eq(0) a').click(function()
{
jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
jQuery('#homeSliderSlideshow').animate({'left':'0'},'slow');
});
jQuery('.sliderBtn li:eq(1) a').click(function()
{
jQuery('.sliderBtn li:eq(0)').removeClass('activeSlide');
jQuery('.sliderBtn li:eq(1)').addClass('activeSlide');
jQuery('#homeSliderSlideshow').animate({'left':'-100px'},'slow');
});
});
HTML:
<div class="wraper">
<ul id="homeSliderSlideshow">
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</li>
</ul>
</div>
<div class="sliderBtn">
<ul>
<li class="activeSlide">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
</ul>
</div>
jQuery(document).ready(function() {
var value=0;
setInterval(function(){
value=value==0?-100:0;
if(value==0)
{
jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
}else if(value==-100){
jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
}
jQuery('#homeSliderSlideshow').animate({'left': value + 'px'},'slow');
},2000);
});
Demo
(function($){ // remap '$' to jQuery
$(document).ready(function(){
var c = 0;
var t;
var n = $('#homeSliderSlideshow li div').length/2;
function actives(){
$('.sliderBtn li:eq('+c+')').addClass('activeSlide');
$('.sliderBtn li:eq('+c+')').siblings('li').removeClass('activeSlide');
}
function anim(){
$('#homeSliderSlideshow').animate({left : -(c*104)},800);
}
function autoAnim(){
t = setTimeout(function(){
c=++c%n;
actives();
anim();
autoAnim();
},2000);
}
autoAnim();
$('.sliderBtn li').click(function(e){
e.stopPropagation();
clearTimeout(t);
c = $(this).index();
actives();
anim();
return false;
});
});
})(jQuery);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With