Camkode
Camkode

Building a Responsive Image Slider with HTML, CSS, and JavaScript

Posted by Kosal

Building a Responsive Image Slider with HTML, CSS, and JavaScript

In today's tutorial, we'll guide you through creating a responsive image slider for your website using the power of HTML, CSS, and JavaScript. Image sliders are a great way to showcase a series of images in an engaging and visually appealing manner.

Getting Started

To begin, set up the basic structure of your HTML file. Here's a simple template to get you started:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Build a Responsive Image Slider</title>
  </head>
  <body>
    <!-- Your slider content goes here -->
    <script src="script.js"></script>
  </body>
</html>

Styling with CSS

Create a CSS file (style.css) to add styling to your image slider:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

img {
  width: 100%;
  object-fit: cover;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.prev, .next {
	width: 40px;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 20px;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript for Functionality

Now, let's add some functionality to the slider using JavaScript. Create a JavaScript file (script.js):

let currentIndex = 0

function showSlide(index) {
  const slider = document.querySelector('.slider')
  const slideWidth = document.querySelector('.slider-container').offsetWidth

  currentIndex = index
  const transformValue = -index * slideWidth
  slider.style.transform = `translateX(${transformValue}px)`
}

function prevSlide() {
  currentIndex = (currentIndex - 1 + getTotalSlides()) % getTotalSlides()
  showSlide(currentIndex)
}

function nextSlide() {
  currentIndex = (currentIndex + 1) % getTotalSlides()
  showSlide(currentIndex)
}

function getTotalSlides() {
  return document.querySelectorAll('.slider img').length
}

// Initial setup
document.addEventListener('DOMContentLoaded', () => {
  showSlide(currentIndex)
})

Bringing It All Together

Now that you have your HTML, CSS, and JavaScript files set up, you can customize the content of the slider by adding images inside the .slider div in your HTML file. For example:

<div class="slider-container">
  <div class="slider-wrapper">
    <div class="slider">
      <img src="https://camkode.com/uploads/2024/0/20240113100653-bg.svg" alt="Image 1" />
      <img
        src="https://camkode.com/uploads/2024/0/20240113095847-beautiful-login-form-html-css.png"
        alt="Image 2"
      />
      <img
        src="https://camkode.com/uploads/2024/0/20240112115920-creating-a-heart-shape-with-html-and-css.png"
        alt="Image 3"
      />
      <!-- Add more images as needed -->
    </div>
  </div>
  <button class="prev" onclick="prevSlide()">❮</button>
  <button class="next" onclick="nextSlide()">❯</button>
</div>

And there you have it! A responsive image slider for your website.

View Live Demo

#javascript #html #css