CODEWITHSUNDEEP
javascript
Norayr Ghukasyan
Norayr Ghukasyan

Reputation: 1418

Image slide with Javascript

i have an image slide here with prototyping . Something is wrong and i cant fix it . I understand that in setInterval the context is lost , and i try to bind it , but it doesnt work . Also tried to wrap , but it didnt work too. what can i do whit this problem ?

function Slide() {
  this.currentStep = 0;
  this.time = 2000;
  this.images = [];

  this.images[0] = 'images/image1.jpg';
  this.images[1] = 'images/image2.jpg';
  this.images[2] = 'images/image3.jpg';
  this.images[3] = 'images/image4.jpg';
  this.images[4] = 'images/image5.jpg';

}

Slide.prototype.carousel = function() {
  document.querySelector('.image').src = this.images[this.currentStep];

  this.currentStep < this.images.length - 1 ? this.currentStep += 1 : this.currentStep = 0;

  setInterval(carousel.bind(Slide), this.time);
}

const imageSlide = new Slide();
imageSlide.carousel();
<div class="slide">
  <img class="image" width="1000" height="500" alt="image">
</div>

Upvotes: 1

Views: 105

Answers (2)

matbou
matbou

Reputation: 159

You could add a slider function to Element.prototype then init using element.slider(sliderInterval).

Element.prototype.slider = function(slideInterval) {
  let currentStep = 1;
  let data = ['https://i.imgur.com/mcr23np.jpg', 'https://i.imgur.com/Eql027R.jpg', 'https://i.imgur.com/oUizZe6.jpg'];
  let imageElement = this.getElementsByClassName('image')[0];
  imageElement.src = data[0];

  setInterval(() => {
    imageElement.src = data[currentStep % data.length];
    currentStep++;
  }, slideInterval);
}

const mySlider = document.getElementById('mySlider');
mySlider.slider(4000);
<div id="mySlider">
  <img class="image" alt="Falied To Load" />
</div>

Upvotes: 0

Angel Politis
Angel Politis

Reputation: 11323

There are three problems with your code:

  1. The function carousel doesn't exist. Perhaps you mean Slide.prototype.carousel or, if used inside the function, this.carousel.
  2. Also, instead of binding the constructor Slide, you should bind the instance this.
  3. Finally, since you are passing this.carousel into setInterval, the function will be executed recursively in an asynchronous manner. However, not as expected, since with every execution you'll be creating more and more intervals repeating the above. Use setTimeout instead.

Snippet:

function Slide() {
  this.currentStep = 0;
  this.time = 2000;
  this.images = [
    'images/image1.jpg',
    'images/image2.jpg',
    'images/image3.jpg',
    'images/image4.jpg',
    'images/image5.jpg'
  ];
}

Slide.prototype.carousel = function() {
  document.querySelector('.image').src = this.images[this.currentStep];

  this.currentStep < this.images.length - 1
    ? this.currentStep += 1
    : this.currentStep = 0;

  setTimeout(this.carousel.bind(this), this.time);
}

const imageSlide = new Slide();
imageSlide.carousel();
<div class="slide">
  <img class="image" width="1000" height="500" alt="image">
</div>

Upvotes: 1

Related Questions