How To Create A Super Simple Image Slider

In this article, I'll show you how to create a super simple image slider with basic HTML, CSS, and JavaScript. 😀

HTML

To start, create a <div> to be the hold images in the slider. I'll add a class named "container" to mine. Then add the images that you want to be in your slider inside that <div> using <img> tags. 🙂

<div class="container">
    <img src="./image-1">
    <img src="./image-2">
    <img src="./image-3">
    <img src="./image-4">
    <!-- etc... -->
</div>

In addition to that, create two buttons to control the slider and give each of them a (meaningful) class name.

<button class="btn-prev">Previous</button>
<button class="btn-next">Next</button>

CSS

In your CSS, select the <div> you just created and add the style position: relative to it so that we can position the images inside relative to the <div> itself. I'll give my container a width and height, too. 😊

.container {
    position: relative;
    width: 600px;
    height: 400px;
}

Next, select the images inside the <div> and add the style position: absolute to them so that they stack up on top of each other and the style opacity: 0 so that they are all invisible.

I'll add a few extra styles to my images so that they fit well within their container. 😉

img {
    position: absolute;
    width: 100%;
    object-fit: cover;
    opacity: 0;
}

Still in your CSS, create a class named "active" and add the style opacity: 1 to it. We'll use JavaScript to add it to the image that we want to be seen.

.active {
    opacity: 1;
}

JavaScript

Moving onto our JavaScript, select the images using the document.querySelectorAll() method and store them in an array. Select the "previous" and "next" buttons (with the document.querySelector() method), too. 🙂

const images = document.querySelectorAll('.container img')
const prevBtn = document.querySelector('.btn-prev')
const nextBtn = document.querySelector('.btn-next')

Create a variable to keep track of the index of the image that we want to be seen from the array of images. Then add the "active" class we created in our CSS to the image at that index in the array.

let index = 0
images[index].classList.add('active')

To show the previous/next image in the array, we need to remove the "active" class from the current image and add it to the image in the place behind/in front of the current image in the array. We can do that by creating two simple functions to do so. 👍

function prevImg() {
    images[index].classList.remove('active')
    index -= 1
    images[index].classList.add('active')
}

function nextImg() {
    images[index].classList.remove('active')
    index += 1
    images[index].classList.add('active')
}

However, we need to be careful that we do not subtract anything from the variable "index" if it is 0 (because we cannot grab an item from an array using a negative index) and not to add anything to the variable "index" that will result in "index" being larger than the largest index in the array (since that will result in an error, as well). 🤨

We can use a conditional expression (in this example, I'll use the ternary operator) to check whether "index" is too low or too high and change the value of "index" based on the slide we want to show.

function prevImg() {
    images[index].classList.remove('active')
    index = index === 0 ? images.length - 1 : index - 1
    images[index].classList.add('active')
}

function nextImg() {
    images[index].classList.remove('active')
    index = index === images.length - 1 ? 0 : index + 1
    images[index].classList.add('active')
}

The variable "index" will be set to the largest index of the array if it is 0 and 0 if it is the largest index of the array.

Finally, add an event listener to each of the buttons and specify which function each of them should run when they are clicked, and... that's it! 🎉

prevBtn.addEventListener('click', prevImg)
nextBtn.addEventListener('click', nextImg)

Extras

Adding a simple transition to the images in your CSS will make the change between images nice and smooth. 😉

img {
    /* other styles */
    transition: .5s;
}

And feel free to experiment with properties like transform to create interesting transitions between slides (such as this zoom in/out effect)! 😜

.container {
    /* other styles */
    overflow: hidden;
}

img {
    /* other styles */
    transform: scale(1.1);
}

.active {
    /* other styles */
    transform: scale(1);
}

I hope you enjoyed this article and perhaps learned something new! 😀

Happy coding! 😄