Building a Custom Image Slider with Vanilla JavaScript

Building a Custom Image Slider with Vanilla JavaScript

Introduction

Image sliders are a popular feature on many websites, showcasing various images or content in a visually appealing and interactive way. While there are plenty of third-party libraries and plugins available to create image sliders, sometimes you may want to build your own custom solution. In this tutorial, we'll walk through the process of creating a simple image slider using vanilla JavaScript, HTML, and CSS.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript.

Step 1: Set Up the HTML Structure

First, let's create the basic HTML structure for our image slider. We'll need a container to hold the slider, an unordered list for the images, and navigation buttons to move between the images.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Custom Image Slider</title>
  7. <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10. <div class="slider-container">
  11. <ul class="slider">
  12. <li class="slide"><img src="image1.jpg" alt="Image 1"></li>
  13. <li class="slide"><img src="image2.jpg" alt="Image 2"></li>
  14. <li class="slide"><img src="image3.jpg" alt="Image 3"></li>
  15. </ul>
  16. <button class="prev-btn">Prev</button>
  17. <button class="next-btn">Next</button>
  18. </div>
  19. <script src="script.js"></script>
  20. </body>
  21. </html>

Step 2: Style the Slider with CSS

Now that we have our HTML structure in place, we can add some CSS to style the slider. We'll start by positioning the slider and images, and then add styles for the navigation buttons.

  1. .slider-container {
  2. position: relative;
  3. width: 100%;
  4. max-width: 800px;
  5. margin: 0 auto;
  6. overflow: hidden;
  7. }
  8.  
  9. .slider {
  10. display: flex;
  11. list-style: none;
  12. padding: 0;
  13. margin: 0;
  14. transition: transform 0.5s ease-in-out;
  15. }
  16.  
  17. .slide {
  18. flex-shrink: 0;
  19. width: 100%;
  20. }
  21.  
  22. .slide img {
  23. width: 100%;
  24. height: auto;
  25. display: block;
  26. }
  27.  
  28. .prev-btn,
  29. .next-btn {
  30. position: absolute;
  31. top: 50%;
  32. transform: translateY(-50%);
  33. background-color: rgba(0, 0, 0, 0.5);
  34. color: #fff;
  35. border: none;
  36. cursor: pointer;
  37. padding: 10px;
  38. font-size: 18px;
  39. z-index: 1;
  40. }
  41.  
  42. .prev-btn {
  43. left: 10px;
  44. }
  45.  
  46. .next-btn {
  47. right: 10px;
  48. }

Step 3: Add the JavaScript Functionality

Finally, let's add the JavaScript functionality to make the slider work. We'll create functions to move between slides, handle the navigation button clicks, and initialize the slider.

  1. const slider = document.querySelector('.slider');
  2. const prevBtn = document.querySelector('.prev-btn');
  3. const nextBtn = document.querySelector('.next-btn');
  4. let currentIndex = 0;
  5.  
  6. function goToSlide(index) {
  7. slider.style.transform = `translateX(-${index * 100}%)`;
  8. currentIndex = index;
  9. }
  10.  
  11. function goToPrevSlide() {
  12. let newIndex = currentIndex - 1;
  13. if (newIndex < 0) {
  14. newIndex = slider.childElementCount - 1;
  15. }
  16. goToSlide(newIndex);
  17. }
  18.  
  19. function goToNextSlide() {
  20. let newIndex = currentIndex + 1;
  21. if (newIndex >= slider.childElementCount) {
  22. newIndex = 0;
  23. }
  24. goToSlide(newIndex);
  25. }
  26.  
  27. function initializeSlider() {
  28. prevBtn.addEventListener('click', goToPrevSlide);
  29. nextBtn.addEventListener('click', goToNextSlide);
  30. }
  31.  
  32. initializeSlider();

In this JavaScript code, we have created the following functions:

  • `goToSlide`: Moves the slider to the specified slide index by updating the slider's transform property.
  • `goToPrevSlide`: Calculates the new index for the previous slide and calls the `goToSlide` function with the new index.
  • `goToNextSlide`: Calculates the new index for the next slide and calls the `goToSlide` function with the new index.
  • `initializeSlider`: Sets up event listeners for the navigation buttons and initializes the slider.

That's it! Now you have a fully functional custom image slider using vanilla JavaScript, HTML, and CSS. You can further customize the slider by adding more styles, animations, or even features like autoplay or pagination.

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More