How to Build an Image Slider with JavaScript and CSS

An image slider is an essential component for displaying multiple images in a website or web application. In this tutorial, we will learn how to build a simple image slider using JavaScript and CSS.

HTML Markup

First, let's define the HTML structure for our image slider. We will use a <div> element with a class of slider-container to contain the slider. Inside the container, we will add an <ul> element to hold the list of images. Each image will be wrapped in an <li> element.

<div class="slider-container">
  <ul class="image-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

CSS Styles

Next, let's add some CSS styles to create a basic layout for our image slider. We will set the width and height of the slider container, and hide the overflow to create a horizontal scrolling effect.

.slider-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.image-list {
  display: flex;
  width: 300%;
  transition: transform 0.3s ease-in-out;
}

.image-list li {
  width: 33.33%;
}

JavaScript Functionality

Now, let's add some JavaScript code to enable the image sliding functionality. We will use the setInterval() function to advance the slider every few seconds. When the slider reaches the last image, it will reset back to the first image.

const slider = document.querySelector('.image-list');
const slides = document.querySelectorAll('.image-list li');

let currentSlide = 0;

setInterval(() => {
  currentSlide++;
  if (currentSlide >= slides.length) {
    currentSlide = 0;
  }
  slider.style.transform = `translateX(-${currentSlide * 33.33}%)`;
}, 3000);

In the JavaScript code above, we first select the slider container and all the image slides. We then initialize a variable currentSlide to keep track of the current position. Inside the setInterval() function, we increment the currentSlide variable and update the transform CSS property of the slider container to move to the next slide.

Conclusion

Congratulations! You have successfully built a simple image slider using JavaScript and CSS. Feel free to customize the styles and add more images to create your own unique image slider. Image sliders are a great way to showcase your work or display important information in a visually appealing manner.

本文来自极简博客，作者：码农日志，转载请注明原文链接：How to Build an Image Slider with JavaScript and CSS