A Coding Boy

;
A Coding Boy

demo post

only for demo nasa prospect

only for demo the gonnies

most popular

how to create parallax website

how to create a beautiful card

how to create a netflix login page

how to create flipping ui card

how to create image generator website

Image Slider in HTML CSS & JavaScript

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.

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:

1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.

2. Create an index.html file. The file name must be index and its extension .html

3. Create a style.css file. The file name must be style and its extension .css

4. Create a script.js file. The file name must be script and its extension .js

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

<!DOCTYPE html>

<head>

<title>Image Slider JavaScript | CodingNepal</title>

</head>

<body>

</div>

</div>

</section>

</body>

</html>

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Image Slider JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" /> <script src="script.js" defer></script> </head> <body> <section class="wrapper"> <i class="fa-solid fa-arrow-left button" id="prev"></i> <div class="image-container"> <div class="carousel"> <img src="images/image1.jpg" alt="" /> <img src="images/image2.jpg" alt="" /> <img src="images/image3.jpg" alt="" /> <img src="images/image4.jpg" alt="" /> </div> <i class="fa-solid fa-arrow-right button" id="next"></i> </div> </section> </body> </html>

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;

}

* { 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; }

Last, 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);

// 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.

live demo

Download files

Info

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}