How to add auto play to an image slider javascript

Question

I got this open-source slider which I have rewritten and adjusted some part of the javascript code to suit my need.

But what I could not tweak to my desire was making the slider play the image or slide automatically on page load.

const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'add', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');

class Carousel {
  constructor(container, items, controls) {
    this.carouselContainer = container;
    this.carouselControls = controls;
    this.carouselArray = [...items];
  }

  updateGallery() {
    this.carouselArray.forEach(el => {
      el.classList.remove('gallery-item-1');
      el.classList.remove('gallery-item-2');
      el.classList.remove('gallery-item-3');
      el.classList.remove('gallery-item-4');
      el.classList.remove('gallery-item-5');
    });

    this.carouselArray.slice(0, 5).forEach((el, i) => {
      el.classList.add(`gallery-item-${i+1}`);
    });
  }

  setCurrentState(direction) {

    if (direction.className == 'gallery-controls-previous') {
      this.carouselArray.unshift(this.carouselArray.pop());
    } else {
      this.carouselArray.push(this.carouselArray.shift());
    }
    
    this.updateGallery();
  }

  
  setControls() {
    this.carouselControls.forEach(control => {
          
      if(control == 'add'){
      }
      else if(control == 'previous'){
          let img = document.createElement('img');
          img.src = "assets/images/icon_prev.png";
          galleryControlsContainer.appendChild(img).className = `gallery-controls-${control}`;
          galleryControlsContainer.appendChild(img).id = `mr40`;
      }
      else if(control == 'next'){
          let img = document.createElement('img');
          img.src = "assets/images/icon_next.png";
          galleryControlsContainer.appendChild(img).className = `gallery-controls-${control}`;
      }
      
    });
  }
 
  useControls() {
    const triggers = [...galleryControlsContainer.childNodes];

    triggers.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.className == 'gallery-controls-add') {} else {
          this.setCurrentState(control);
        }

      });
    });
  }
}

const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);

exampleCarousel.setControls();
exampleCarousel.useControls();

That is the javascript above.

Below is a sample html

<!DOCTYPE html>
<html>
<head>
    <title>slider</title>
        <link rel="stylesheet" href="slider.css">
</head>
<body>


                                <div class="gallery">
                                    <div class="gallery-container">
                                            <img class="gallery-item gallery-item-1" src="cimg1.jpg" data-index="1">
                                            <img class="gallery-item gallery-item-2" src="cimg2.jpg" data-index="2">
                                            <img class="gallery-item gallery-item-3" src="cimg3.jpg" data-index="3">
                                    </div>
                                    <div class="gallery-controls"></div>
                                  </div>
                            
<script src="slider.js"></script>

</body>
</html>

So, I would be pleased to have someone help with this. Thanks!

Answer 1

I have seen this being done with options being passed when constructing the object (slider in this case). In your case the options would include autoplay: boolean and slideDelay: number or something similar.

Adding the functionality should be as simple as using setTimeout or setInterval in order to execute the next functionality for the slider. So, instead of acting on a mouse click, it would act on the interval timer.

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

How to add auto play to an image slider javascript

Question

1 answers

solution1
0 2022-03-20 21:39:13

How to add auto play to an image slider javascript

Question

1 answers

solution1 0 2022-03-20 21:39:13

solution1
0 2022-03-20 21:39:13