CODEWITHSUNDEEP
javascriptjquery
tett
tett

Reputation: 605

How make slider change slides after some seconds?

I have a kind of slider, whose elements are defined below the tags like this:

<div class="content-switcher" id="Content1">

And I also have Content2, and Content3, and inside of them, I have a some other code for the stuff to be displayed. Then at the top of the page I have something like this:

    <div class="progress-container">

        <a href="" class="item-number" onclick="selectStep(1); return false;">1</a>
        <a href="" class="item-number" onclick="selectStep(2); return false;">2</a>
        <a href="" class="item-number" onclick="selectStep(3); return false;">3</a>

            <div class="progress-selected"></div>

    </div>

And my selectStep function is defined like this:

    function selectStep(n){

    if(n==1){
        $(".progress-selected").animate({marginLeft: '5px'},300);
    }else if(n==2){
    $(".progress-selected").animate({marginLeft: '72px'},300);
    }else if (n==3){
    $(".progress-selected").animate({marginLeft: '132px'},300);
    }
    $(".content-switcher").hide();
    $("#Content"+n).fadeIn();
}

So the point is that, when I open the page, it shows the first slide of the slider, which is okay for me, and if I click to number to it changes the slide, but I want after staying for 3 seconds in the first slide, I want it to automatically move to the second one then third and again return to the first one, and continue like this forever. I guess I need to use something like setTimeout, but don't know how to achieve it. Please also note that it should work onload, I mean when the page is loaded. Any idea?

Upvotes: 0

Views: 1792

Answers (3)

Tim B James
Tim B James

Reputation: 20374

You will want to use window.setInterval rather than setTimeout. Something along the lines of;

// set the variable which holds the number of steps/slides you have
var totalSteps = 3;
// set the current selected step, default is the first slide.
var selectedStep = 1; 
// assign this to a variable so you can use later
var myInterval = null;

var start = function(){

    myInterval = window.setInterval(function(){

        // increment the step
        selectedStep++;

        // check that we are not attempting to select a step that doesn't exist
        if ( selectedStep > totalSteps ){
            // reset back to 1
            selectedStep = 1;
        }

        // call the function with the selected step
        selectStep(selectedStep);

    }, 3000);        

};

Just call start(); when you want to start the code.

If you want to cancel the interval at any time you can call window.clearInterval(myInterval); and then restart it later by calling start(); again.

Check out a working demo here at jsbin

Upvotes: 1

john Smith
john Smith

Reputation: 17936

sth like this simple interval function maybe ? 

i = $('.item-number').length;
y = 0;
setInterval(function(){
if(y >= i ) { y = 0 }
$('.item-number')[y].click();
y++;

},3000);

Upvotes: 0

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

Here's the code:

var slide_number = 1;
var sliding_speed = 3000;
var max_number_of_slides = 3;
$(document).ready(function() {
  setInterval(selectStep(slide_number), sliding_speed);
});

function selectStep(n) {
  if (n == 1) {
    $(".progress-selected").animate({
      marginLeft: '5px'
    }, 300);
  } else if (n == 2) {
    $(".progress-selected").animate({
      marginLeft: '72px'
    }, 300);
  } else if (n == 3) {
    $(".progress-selected").animate({
      marginLeft: '132px'
    }, 300);
  }
  $(".content-switcher").hide();
  $("#Content" + n).fadeIn();
  if (slide_number == max_number_of_slides) slide_number = 0;
  slide_number = slide_number++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="progress-container">
  <a href="" class="item-number">1</a>
  <a href="" class="item-number">2</a>
  <a href="" class="item-number">3</a>
  <div class="progress-selected"></div>
</div>

You should use setInterval not setTimeout. Read more here

Upvotes: 0

Related Questions