infinite image slider with javascript

An image slider (also called an image carousel) is a feature on a website that displays a series of images in a rotating or sliding format. It typically allows users to manually control the slideshow using arrows, dots, or swipe gestures.

How to add the slider

1) add index to each slider child

make list of image with slider as their container then add an index to it

const sliderImage = document.getElementById('slider').children
for (let index = 0; index < sliderImage.length; index++) {
  sliderImage[index].classList.add('slider__image')
  sliderImage[index].id = "image" + index
}

2) display image based on its index

for next image button: if imageNumber are above 0 then increase the index, else start again from 0

for previous image button: if imageNumber are bellow 4 then decrease the index, else start again to 4

const imageStart = 0
const imageEnd = 4
function showNextImage(imageNumber) {
  if (imageNumber > imageStart) {
    document.getElementById(`image${imageNumber - 1}`).classList.remove('slider__image--rendered')
    document.getElementById(`image${imageNumber}`).classList.add('slider__image--rendered')
  } else {
    document.getElementById(`image${imageEnd}`).classList.remove('slider__image--rendered')
    document.getElementById(`image${imageStart}`).classList.add('slider__image--rendered')
  }
}
function showPrevImage(imageNumber) {
  if (imageNumber < imageEnd) {
    document.getElementById(`image${imageNumber + 1}`).classList.remove('slider__image--rendered')
    document.getElementById(`image${imageNumber}`).classList.add('slider__image--rendered')
  } else {
    document.getElementById(`image${imageStart}`).classList.remove('slider__image--rendered')
    document.getElementById(`image${imageEnd}`).classList.add('slider__image--rendered')
  }
}

You're all set!

Now you can slide the image with a button

Codepen

a