CODEWITHSUNDEEP
javascriptjquery
user2720970
user2720970

Reputation: 294

Javascript Slides with variable timeouts

I have an automatic slideshow that works fine. However, I would like to be able to vary the speed for some of the slides Here is the code:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} 
  slides[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

Thanks

Upvotes: 1

Views: 391

Answers (4)

Ele
Ele

Reputation: 33726

You can add an attribute to your slides data-timeout

I.E:

<div class='mySlides' data-timeout='2000'>Slide 1</div>

And then every loop get the specific timeout for a slide.

var slideIndex = 0;

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  var timeout = slides[slideIndex - 1].getAttribute('data-timeout');
  console.log(timeout);
  setTimeout(showSlides, timeout);
}

showSlides();
<div class='mySlides' data-timeout='2000'>Slide 1</div>
<div class='mySlides' data-timeout='3000'>Slide 2</div>
<div class='mySlides' data-timeout='4000'>Slide 3</div>

Upvotes: 0

biziclop
biziclop

Reputation: 14596

I put your code into an almost-class.

The Fiddle:
https://jsfiddle.net/4bjcdftq/

The Snippet: 

var iSlider = {
  slideIndex: null,
  prevSlideIndex: null,
  slides: null,
  defaultDuration: 2000,

  initSlides: function(){
    this.slides = document.getElementsByClassName("iSlide");
    for( var i = 0; i < this.slides.length; i++ ){
      this.slides[i].style.display = "none"; 
    }
    this.prevSlideIndex = null;
    this.slideIndex = -1;
  },

  showSlides: function(){
    if( this.prevSlideIndex != null )  this.slides[ this.prevSlideIndex ].style.display = "none";
    this.slideIndex = ( this.slideIndex + 1 + this.slides.length ) % this.slides.length;
    this.slides[ this.slideIndex ].style.display = "block";
    this.prevSlideIndex = this.slideIndex;
    var duration = +( this.slides[ this.slideIndex ].getAttribute('data-duration') || this.defaultDuration );
    setTimeout( this.showSlides.bind( this ), duration ); // Change image every 2 seconds
  }
};

iSlider.initSlides();
iSlider.showSlides();
    <div class="iSlide" data-duration="500">111</div>
    <div class="iSlide" data-duration="">222</div>
    <div class="iSlide" data-duration="4000">333</div>
    <div class="iSlide" data-duration="">444</div>

Upvotes: 2

Mathieu Benhalima
Mathieu Benhalima

Reputation: 16

You can do it like that 

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var time = 200;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
      if(i == 2){
        time = 500;
      }else{
        time = 200
      }
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1} 
  slides[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, time); // Change image every 2 seconds
}

On this example i change the time to 500ms for the slide 2.

Upvotes: 0

DBS
DBS

Reputation: 9984

You could add a data attribute to your elements containing the timeout for each slide, and then read it when displaying the slide.

E.g. (using your code)

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, $(slides[slideIndex - 1]).data("time")); // Grab the data-time from the element we're using
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mySlides" data-time="500">Test 1</div>
<div class="mySlides" data-time="2000">Test 2</div>
<div class="mySlides" data-time="5000">Test 3</div>
<div class="mySlides" data-time="500">Test 4</div>

Upvotes: 2

Related Questions