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

Kosal Ang

Sun Jan 14 2024

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:

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    <link rel="stylesheet" href="style.css" />
7    <title>Build a Responsive Image Slider</title>
8  </head>
9  <body>
10    <!-- Your slider content goes here -->
11    <script src="script.js"></script>
12  </body>
13</html>
14

Styling with CSS

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

1body {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 100vh;
6  margin: 0;
7  font-family: Arial, sans-serif;
8}
9
10.slider-container {
11  position: relative;
12  width: 100%;
13  max-width: 800px;
14  margin: 0 auto;
15  overflow: hidden;
16}
17
18.slider-wrapper {
19  display: flex;
20}
21
22.slider {
23  display: flex;
24  transition: transform 0.5s ease-in-out;
25}
26
27img {
28  width: 100%;
29  object-fit: cover;
30}
31
32button {
33  position: absolute;
34  top: 50%;
35  transform: translateY(-50%);
36  font-size: 20px;
37  background: none;
38  border: none;
39  color: #fff;
40  cursor: pointer;
41}
42
43.prev, .next {
44	width: 40px;
45	height: 40px;
46	border: 1px solid #ccc;
47	border-radius: 20px;
48}
49
50.prev {
51  left: 10px;
52}
53
54.next {
55  right: 10px;
56}
57

JavaScript for Functionality

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

1let currentIndex = 0
2
3function showSlide(index) {
4  const slider = document.querySelector('.slider')
5  const slideWidth = document.querySelector('.slider-container').offsetWidth
6
7  currentIndex = index
8  const transformValue = -index * slideWidth
9  slider.style.transform = `translateX(${transformValue}px)`
10}
11
12function prevSlide() {
13  currentIndex = (currentIndex - 1 + getTotalSlides()) % getTotalSlides()
14  showSlide(currentIndex)
15}
16
17function nextSlide() {
18  currentIndex = (currentIndex + 1) % getTotalSlides()
19  showSlide(currentIndex)
20}
21
22function getTotalSlides() {
23  return document.querySelectorAll('.slider img').length
24}
25
26// Initial setup
27document.addEventListener('DOMContentLoaded', () => {
28  showSlide(currentIndex)
29})
30

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:

1<div class="slider-container">
2  <div class="slider-wrapper">
3    <div class="slider">
4      <img src="https://camkode.s3.amazonaws.com/uploads/2024/0/20240113100653-bg.svg" alt="Image 1" />
5      <img
6        src="https://camkode.s3.amazonaws.com/uploads/2024/0/20240113095847-beautiful-login-form-html-css.png"
7        alt="Image 2"
8      />
9      <img
10        src="https://camkode.s3.amazonaws.com/uploads/2024/0/20240112115920-creating-a-heart-shape-with-html-and-css.png"
11        alt="Image 3"
12      />
13      <!-- Add more images as needed -->
14    </div>
15  </div>
16  <button class="prev" onclick="prevSlide()">❮</button>
17  <button class="next" onclick="nextSlide()">❯</button>
18</div>
19