CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Benjamin
Benjamin

Reputation: 2670

Slider need animation on timeout function

<div id="slider-wrapper">
    <div id="slider">
        <div class="sp" style="background: blue;">akjdfalfkdj</div>
        <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
        <div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
        <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
    </div>
    </div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>

CSS

#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}

#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}

JQUERY

$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();    
$('.active').show();

    $('#button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('#button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    }); 
});

I have the above jquery slider all i need to have a timeout function which the slider slides automatically and as well i need it to slide according to the prev and next buttons. Thanks in advance

DEMO

Upvotes: 0

Views: 279

Answers (3)

mplungjan
mplungjan

Reputation: 177851

Try this

Use clearInterval(tId) to stop and run() to start again if you want to pause when next/prev is clicked

Live Demo

var tId;
function run() {
  tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
    $('.sp').first().addClass('active');
    $('.sp').hide();
    $('.active').show();
    $sp = $(".sp");
    $('.nav').click(function () {
        var which = this.id.replace("button-", ""),
            next = which == "next",
            $oldActive = $('.active');
        if (next) {
            if ($oldActive.index()==$sp.length-1) {
                $('.sp').first().addClass('active');
            } else {
                $oldActive.next().addClass('active');
            }
        } else {
            if ($oldActive.index()==0) {
                $('.sp').last().addClass('active');
            } else {
                $oldActive.prev().addClass('active');
            }
        }
        $oldActive.removeClass('active');
        $('.sp').fadeOut();
        $('.active').fadeIn();
    });
    run();
});

Upvotes: 1

KJ Price
KJ Price

Reputation: 5964

I think you would want to use the jQuery.animate function. Something like this:

$(".active").animate({width:"100%"},750);

This assumes that the sliders have a default css property of width: 0%.

Edit: new fiddle http://jsfiddle.net/qnM3x/1/

Upvotes: 0

Lukai
Lukai

Reputation: 41

To use the timeout function goes like this:

setInterval(function(){
//your function you want to timeout
},1000);

1000 milliseconds = 1 second

Upvotes: 2

Related Questions