How to Make Slider in HTML and CSS: 3 Easy Steps

Sliders or carousels are essential components for modern web design, offering an engaging way to showcase content, images, or products. Knowing how to make slider in HTML and CSS is a crucial skill for web developers and designers alike. Sliders can enhance user experience by presenting information in a compact and visually appealing format.

This guide will walk you through creating a responsive slider from scratch using HTML, CSS, and optional JavaScript for added interactivity. Whether you’re designing a portfolio, e-commerce site, or blog, this tutorial will help you craft a slider that stands out.

How to Make Slider in HTML and CSS: 3 Easy Steps

Step 1: Create the HTML Structure

The first step is to set up the basic structure of your slider using HTML. This includes defining the container, individual slides, navigation buttons, and indicators.

<!-- Slider Container -->
<div class="custom-slider-container">

  <!-- Slide Items -->
  <div class="custom-slide fade-effect">
    <div class="slide-index">1 / 4</div>
    <img src="image1.jpg" alt="First Image" class="slider-image">
    <div class="slide-caption">Caption for First Image</div>
  </div>

  <div class="custom-slide fade-effect">
    <div class="slide-index">2 / 4</div>
    <img src="image2.jpg" alt="Second Image" class="slider-image">
    <div class="slide-caption">Caption for Second Image</div>
  </div>

  <div class="custom-slide fade-effect">
    <div class="slide-index">3 / 4</div>
    <img src="image3.jpg" alt="Third Image" class="slider-image">
    <div class="slide-caption">Caption for Third Image</div>
  </div>

  <div class="custom-slide fade-effect">
    <div class="slide-index">4 / 4</div>
    <img src="image4.jpg" alt="Fourth Image" class="slider-image">
    <div class="slide-caption">Caption for Fourth Image</div>
  </div>

  <!-- Navigation Buttons -->
  <button class="slider-prev" onclick="changeSlide(-1)">&#10094;</button>
  <button class="slider-next" onclick="changeSlide(1)">&#10095;</button>
</div>

<!-- Dots for Navigation -->
<div class="slider-indicators">
  <span class="indicator-dot" onclick="setSlide(1)"></span>
  <span class="indicator-dot" onclick="setSlide(2)"></span>
  <span class="indicator-dot" onclick="setSlide(3)"></span>
  <span class="indicator-dot" onclick="setSlide(4)"></span>
</div>

Explanation:

Slider Container:

• The outermost <div> with the class custom-slider-container serves as the main wrapper.
• Likely styled using CSS to define layout, size, and positioning.

Slides:

• Each slide is a <div> with the class custom-slide, ensuring consistent styling.
• Includes the fade-effect class for fade animation during transitions.
• Each slide contains:
  • A slide index (<div class="slide-index">) showing the current slide number (e.g., “1 / 4”).
  • An image (<img> tag) with attributes:
    • src: Specifies the image file.
    • alt: Provides an accessible description or fallback text.
  • A caption (<div class="slide-caption">) describing the image.

Navigation Buttons:

• Two buttons allow users to navigate between slides:
  • Previous Button (❮):
    • Moves to the previous slide by calling changeSlide(-1).
  • Next Button (❯):
    • Moves to the next slide by calling changeSlide(1).
• Buttons are styled with slider-prev and slider-next classes for proper positioning and design.

Indicators (Dots):

• A set of dots below the slides represents each slide.
• Clicking a dot directly navigates to the corresponding slide using the setSlide(slideNumber) function.
• Dots are styled with the indicator-dot class.

JavaScript Functionality:

• changeSlide(n): Adjusts the current slide based on the direction (n = -1 or n = 1).
• setSlide(n): Directly sets the slider to a specific slide number (n).

Styling and Animation:

• Classes like custom-slider-container, custom-slide, fade-effect, and slider-image handle layout and visual design.
• The fade-effect class is likely used for smooth transitions between slides.

Overall Functionality:

• Displays one slide at a time with images, captions, and an index.
• Offers intuitive navigation via buttons and clickable dots.
• Combines CSS for styling and JavaScript for dynamic behavior, creating a responsive and visually engaging slider.

Step 2: Add the CSS Styles

Now, we’ll define styles to make the slider visually appealing. We’ll style the container, slides, navigation buttons, captions, and dots using clean and modern aesthetics.

/* Universal Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Slider Container */
.custom-slider-container {
  max-width: 1000px;
  position: relative;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Slide Items */
.custom-slide {
  display: none;
  position: relative;
  text-align: center;
}

/* Slide Image */
.slider-image {
  width: 100%;
  border-radius: 12px;
}

/* Slide Caption */
.slide-caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 15px;
  font-size: 18px;
  border-radius: 6px;
}

/* Slide Index */
.slide-index {
  position: absolute;
  top: 8px;
  left: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
}

/* Navigation Buttons */
.slider-prev, .slider-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  text-align: center;
  line-height: 40px;
  transition: background-color 0.3s;
}

.slider-prev:hover, .slider-next:hover {
  background-color: #333333;
}

.slider-prev {
  left: 15px;
}

.slider-next {
  right: 15px;
}

/* Dots for Navigation */
.slider-indicators {
  text-align: center;
  margin-top: 15px;
}

.indicator-dot {
  cursor: pointer;
  height: 14px;
  width: 14px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.indicator-dot.active, .indicator-dot:hover {
  background-color: #666666;
}

/* Fade Animation */
.fade-effect {
  animation: fadeIn 1.5s;
}

@keyframes fadeIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

Explanation:

This CSS code is designed to style a custom image slider with several key components, including a reset for consistent styling, a slider container, slide items, navigation buttons, and visual effects like fading and hover effects. Here’s a detailed breakdown of each section:

Universal Reset

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

This part applies a universal reset, which resets the default margin and padding of all elements to 0 and ensures consistent box-sizing by setting box-sizing: border-box. This means that the padding and border widths will be included in the element’s total width and height, avoiding layout issues.

Slider Container

.custom-slider-container {
  max-width: 1000px;
  position: relative;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

The .custom-slider-container class styles the outer container of the slider. It has a max-width of 1000px to limit its size, and it’s centered horizontally using margin: 20px auto. The overflow: hidden property hides any content that exceeds the container’s boundaries (important for slider effects). The container has rounded corners with border-radius: 12px and a subtle box shadow for a soft, elevated appearance.

Slide Items

.custom-slide {
  display: none;
  position: relative;
  text-align: center;
}

The .custom-slide class defines individual slides. Initially, all slides are hidden with display: none to ensure that only one slide is visible at a time. The position: relative allows positioning of child elements (like captions) relative to the slide itself. The text-align: center centers the content inside the slide.

Slide Image

.slider-image {
  width: 100%;
  border-radius: 12px;
}

The .slider-image class styles the images within each slide. The width: 100% ensures that the image stretches to fill the entire width of the slide, while border-radius: 12px rounds the image’s corners to match the container’s border-radius.

Slide Caption

.slide-caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 15px;
  font-size: 18px;
  border-radius: 6px;
}

The .slide-caption class styles the text captions that appear on each slide. The position: absolute allows the caption to be positioned relative to its parent slide. It’s placed at the bottom of the slide with bottom: 12px, and left: 50% along with transform: translateX(-50%) centers it horizontally. The caption has a dark semi-transparent background (rgba(0, 0, 0, 0.6)) with white text (color: #ffffff), rounded corners, and padding to improve readability.

Slide Index

.slide-index {
  position: absolute;
  top: 8px;
  left: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
}

The .slide-index class is used to display the current slide number and total slides (e.g., “1 / 4”). Positioned at the top-left corner of each slide, the index has a background color of rgba(0, 0, 0, 0.5) for contrast, white text color, and padding to ensure legibility. The rounded corners are achieved with border-radius: 4px.

Navigation Buttons

.slider-prev, .slider-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  text-align: center;
  line-height: 40px;
  transition: background-color 0.3s;
}

.slider-prev:hover, .slider-next:hover {
  background-color: #333333;
}

.slider-prev {
  left: 15px;
}

.slider-next {
  right: 15px;
}

The .slider-prev and .slider-next classes style the navigation buttons. They are circular buttons with a width and height of 40px and centered text (text-align: center, line-height: 40px). The position: absolute places the buttons in the center vertically (top: 50%, transform: translateY(-50%)), with left: 15px for the previous button and right: 15px for the next button. The buttons have a semi-transparent background that darkens when hovered (background-color: #333333). The transition: background-color 0.3s ensures a smooth hover effect.

Dots for Navigation

.slider-indicators {
  text-align: center;
  margin-top: 15px;
}

.indicator-dot {
  cursor: pointer;
  height: 14px;
  width: 14px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.indicator-dot.active, .indicator-dot:hover {
  background-color: #666666;
}

The .slider-indicators class centers the navigation dots, and the .indicator-dot class styles each dot. Dots are small circles with a height and width of 14px and a light gray background color (#bbb). The border-radius: 50% ensures they are circular. When a dot is active or hovered, its background color darkens (background-color: #666666). The transition effect is applied to the background color, making it smooth.

Fade Animation

.fade-effect {
  animation: fadeIn 1.5s;
}

@keyframes fadeIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

The .fade-effect class applies a fade-in animation to the slides, lasting 1.5 seconds. The @keyframes fadeIn rule defines the animation, starting with an opacity of 0.4 and gradually transitioning to 1 (fully visible). This creates a smooth fade effect when the slide changes.

---

Step 3: Add JavaScript for Interactivity

To enable slide navigation and automated sliding, JavaScript is essential. Below is the script to make your slider interactive.

let currentSlideIndex = 1;
displaySlide(currentSlideIndex);

// Function to Change Slide
function changeSlide(step) {
  displaySlide(currentSlideIndex += step);
}

// Function to Set Slide
function setSlide(index) {
  displaySlide(currentSlideIndex = index);
}

// Display the Current Slide
function displaySlide(index) {
  let slides = document.getElementsByClassName("custom-slide");
  let dots = document.getElementsByClassName("indicator-dot");
  if (index > slides.length) { currentSlideIndex = 1; }
  if (index < 1) { currentSlideIndex = slides.length; }
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[currentSlideIndex - 1].style.display = "block";
  dots[currentSlideIndex - 1].className += " active";
}

// Automatic Sliding Feature
setInterval(() => {
  changeSlide(1);
}, 4000); // Slide changes every 4 seconds

Explanation:

This JavaScript code controls the behavior of a custom image slider, allowing the user to manually navigate through the slides or let the slides change automatically every 4 seconds. Here’s a breakdown of what each part of the code does:

Initial Setup

let currentSlideIndex = 1;
displaySlide(currentSlideIndex);

The currentSlideIndex is initially set to 1, meaning the first slide will be displayed when the page loads. The function displaySlide(currentSlideIndex) is called immediately to display the first slide.

Function to Change Slide

function changeSlide(step) {
  displaySlide(currentSlideIndex += step);
}

The changeSlide() function allows the user to navigate between slides. It takes a step parameter, which can either be 1 (for the next slide) or -1 (for the previous slide). The function adds the step value to currentSlideIndex and then calls displaySlide() to update the visible slide.

Function to Set Slide

function setSlide(index) {
  displaySlide(currentSlideIndex = index);
}

The setSlide() function directly sets the slide to the specified index and updates the currentSlideIndex variable. It then calls displaySlide() to update the slide visibility.

Display the Current Slide

function displaySlide(index) {
  let slides = document.getElementsByClassName("custom-slide");
  let dots = document.getElementsByClassName("indicator-dot");
  if (index > slides.length) { currentSlideIndex = 1; }
  if (index < 1) { currentSlideIndex = slides.length; }
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[currentSlideIndex - 1].style.display = "block";
  dots[currentSlideIndex - 1].className += " active";
}

The displaySlide() function is responsible for displaying the correct slide based on the currentSlideIndex. It performs the following steps:

1. Retrieves all elements with the class custom-slide (the slides) and indicator-dot (the navigation dots).
2. Checks if the index exceeds the number of slides or goes below 1. If so, it wraps the index around to the other end of the slider (i.e., looping the slider).
   • If index is greater than the number of slides, it sets currentSlideIndex to 1 (first slide).
   • If index is less than 1, it sets currentSlideIndex to the last slide.
3. Hides all slides by setting their style.display to "none".
4. Removes the “active” class from all dots.
5. Displays the slide at the position currentSlideIndex - 1 by setting its style.display to "block".
6. Adds the “active” class to the dot corresponding to the current slide.

Automatic Sliding Feature

setInterval(() => {
  changeSlide(1);
}, 4000); // Slide changes every 4 seconds

The setInterval() function automatically changes the slide every 4 seconds. It calls changeSlide(1), which moves the slider to the next slide. The interval is set to 4000 milliseconds (4 seconds), meaning the slide will automatically advance every 4 seconds without user interaction.

---

Summary

This code enables the functionality of a custom image slider where:

• The user can manually navigate slides using the changeSlide() and setSlide() functions.
• The correct slide and corresponding navigation dot are displayed by the displaySlide() function.
• An automatic sliding feature is implemented using setInterval(), which changes the slide every 4 seconds, creating an autoplay effect.

Conclusion

In conclusion, learning How to Make Slider in HTML and CSS is an essential skill for web developers looking to enhance their websites with interactive and dynamic elements. With just a few lines of code, you can create a stylish and functional slider that improves the user experience. Whether you’re showcasing images, products, or testimonials, this technique provides a simple yet effective solution for adding visual appeal and interactivity to your site.

By experimenting with different CSS properties and HTML structures, you can fully customize your slider to suit your unique design needs.