Image Slider in HTML CSS & JavaScript

CodingNepal — Sat, 25 Feb 2023 21:11:22 +0000

You may have seen an image sliding feature on various popular social media platforms. Where the user can slide the image right or left. Did you know those types of image sliders can be made using HTML CSS and JavaScrip without using any plugins?

Today in this blog you will learn how to create an Image Slider using HTML CSS & JavaScript. Creating an image slider is an excellent way to enhance your coding skills in HTML, CSS, and JavaScript. Recently I have also created an Image Slider in Swiper Js I hope that post will also be beneficial for you.

If you are eager to see a demonstration of this Image Slider and are interested in learning how to create it using HTML CSS & JavaScript, then there is a video tutorial available below that will guide you through the process step by step.

Video Tutorial of Image Slider in HTML CSS & JavaScript

Creating Image Slider provides a practical project that allows you to practice using various techniques and concepts in a real-world scenario. I would highly recommend that you watch the full video tutorial.

In the video tutorial for the Image Slider, I provided comments on each line of code to help you better understand the process. However, if you prefer not to watch the video, you can still follow the instructions in this blog post to create your own Automatic Image Slider.

Steps For Creating Image Slider in HTML CSS & JavaScript

To create a Image Slider using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code of this Image Slider by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    Image Slider JavaScript | CodingNepal

Second, paste the following codes into your style.css file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #343f4f;
}
.wrapper {
  display: flex;
  max-width: 650px;
  width: 100%;
  height: 400px;
  background: #fff;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper i.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 36px;
  background-color: #343f4f;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 15px;
  transition: all 0.3s linear;
  z-index: 100;
  cursor: pointer;
}
i.button:active {
  transform: scale(0.94) translateY(-50%);
}
i#prev {
  left: 25px;
}
i#next {
  right: 25px;
}
.image-container {
  height: 320px;
  max-width: 500px;
  width: 100%;
  overflow: hidden;
}
.image-container .carousel {
  display: flex;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease;
}
.carousel img {
  height: 100%;
  width: 100%;
  border-radius: 18px;
  border: 10px solid #fff;
  object-fit: cover;
}

Third, paste the following codes into your script.js file.

// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
  carousel = document.querySelector(".carousel"),
  images = document.querySelectorAll("img"),
  buttons = document.querySelectorAll(".button");

let imageIndex = 1,
  intervalId;

// Define function to start automatic image slider
const autoSlide = () => {
  // Start the slideshow by calling slideImage() every 2 seconds
  intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();

// A function that updates the carousel display to show the specified image
const slideImage = () => {
  // Calculate the updated image index
  imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
  // Update the carousel display to show the specified image
  carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};

// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
  // Stop the automatic slideshow
  clearInterval(intervalId);
  // Calculate the updated image index based on the button clicked
  imageIndex += e.target.id === "next" ? 1 : -1;
  slideImage(imageIndex);
  // Restart the automatic slideshow
  autoSlide();
};

// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));

// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);

That’s all, now you’ve successfully created a project on Image Slider. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Automatic Image Slider in HTML and CSS

CodingNepal — Mon, 21 Jun 2021 21:11:18 +0000

Hello readers, today in this blog I’m going to build an Automatic Image Slider in HTML CSS. Earlier I created lots of Card with Sliding Animation but to date, I haven’t built any Image slideshow. So without further ado let’s get started.

What is an Automatic Image Slider?
An automatic image slide means changing or sliding images and displays one by one and step by set. In this automatic image, slideshow users do not need to change images manually.

As you can see from the given Image on the webpage. Actually, this is not one image there are other 3 images that are hidden. Let’s watch the following video then we will know the real demo or example of this automatic image slider or automatic image slideshow.

Demo of Automatic Image Slider in HTML CSS

Video NOT Found!

As you have seen in the video of this automatic image slider in HTML CSS. I believe now you know that we can build an automatic image slider without using JavaScript. Have you noticed, that when I hover on the image then the image’s animation stops, for this feature, I have used the CSS animation play state paused property?

To make this sliding animation I have given the image parent width 400% because I have used 4 images and in animation, I have given margin-left -100% to the parent image of the images. If I had used 5 images then I would have given the image parent width 500%.

Now I believe you can easily make this automatic image slider in HTML CSS. If you are feeling difficulty creating this image slider then scroll down to get all source code files of this automatic image slider.

Automatic Image Slider [Source Code]

To copy-paste the following code of the automatic image slider, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given code of the image slideshow in your document.

How to make an automatic image slider in HTML?
Create an HTML file on your computer with the name index.html and copy-paste the following HTML code into your document.




  
    
     Automatic Image Sider in HTML CSS | CodingLab

Create a CSS file on your computer with the name style.css and copy-paste the following CSS code into your document.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7D2AE8;
  padding: 0 30px;
}
.container{
  max-width: 800px;
  width: 100%;
  height: 500px;
  border: 7px solid #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.image-box{
  display: flex;
  height: 100%;
  width: 400%;
  justify-content: space-between;
}
.image-box{
  animation: imgBox 10s linear infinite;
}
@keyframes imgBox{
  0%{
    margin-left: 0;
  }
  100%{
    margin-left: -300%;
  }
}
.image-box:hover{
  animation-play-state: paused;
}
.image-box .image{
  width: calc(100% - 100px);
  height: 100%;
}
.image-box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}