Hey buddy, how are you doing nowadays? I hope you are doing and creating extraordinary. Today I have brought something exciting and useful HTML CSS & JavaScript project, In this project, you are going to learn to create a Website Image Slider. Earlier I created a Responsive Card Slider hope, you liked that project.
Website Image Slider refers to the features on the website header or hero section where the user can slide images by clicking on the nav button or as well as by grabbing the image. Also, there is pagination that shows how many images that website has on the harder section. We can see such type of features in many types of websites like e-commerce, sports, newspaper, travel/tour, and many many others.
Have a quick look at the given image of our project [Website Image Slider]. As you can see on the given image there is an image that covers full height and width, on the right and left sides there are two nav buttons to slide the image and at the button, we can see a beautiful pagination section. At the center, there are some text and a button.
To watch the real demo of this project and all the animations that I have added to this project, you can watch the given video tutorial of this project [Website Image Slider], also by watching the video tutorial you will get an idea about all the code that I have used to create this image slider.
Video Tutorial of Image Slider in HTML CSS & JavaScript
I have provided all the HTML CSS & JavaScript code with the Swiperjs file that I used to create this Website Image Slider, before getting into the source code, I would like to briefly explain the video tutorial of the image slider.
As you have seen in the video tutorial of our project Image Slider. In the first view, we see a full-size screen, two nav buttons, pagination, and some text with buttons. When I click on the left side button the image moves to the left side and another image appears from the right side, similarly when I again click on that button another image appears.
Also, we have seen in the responsive part, that when the width of the screen comes into small sizes like tablet and mobile, then those nav buttons disappear and pagination appears and we can slide those images by just grabbing them. I have used HTML CSS and JavaScript and swiperjs extension to create this responsive image slider.
I hope, now I can build this Image Slider easily by using HTML CSS & JavaScript, and of course Swiperjs. If you are finding it difficult to make this Image Slider, I have provided all the source codes below.
You May Like This:
Steps to Create Image Slider in HTML & JavaScript
To create a responsive image slider using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file calledÂ
index.html to serve as the main file. - Create a file calledÂ
style.css for the CSS code. - Finally, download the Images folder and put it in your project directory. This folder contains all the images you’ll need for this image slider. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include all essential HTML semantic tags, Swiper links, and scripts.
<!DOCTYPE html>
<!-- Coding by CodingLab | www.codinglabweb.com -->
<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>Website Image Slider</title>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="main swiper mySwiper">
<div class="wrapper swiper-wrapper">
<div class="slide swiper-slide">
<img src="images/img1.jpg" alt="" class="image" />
<div class="image-data">
<span class="text">Enjoy the finest coffee drinks.</span>
<h2>
Enjoy Our Exclusive <br />
Coffee and Cocktails
</h2>
<a href="#" class="button">About Us</a>
</div>
</div>
<div class="slide swiper-slide">
<img src="images/img2.jpg" alt="" class="image" />
<div class="image-data">
<span class="text">We really like what we do.</span>
<h2>
Coffee Beans with a <br />
Perfect Aroma
</h2>
<a href="#" class="button">About Us</a>
</div>
</div>
<div class="slide swiper-slide">
<img src="images/img3.jpg" alt="" class="image" />
<div class="image-data">
<span class="text">Making Our coffee with lover.</span>
<h2>
Alluring and Fragrant <br />
Coffee Aroma
</h2>
<a href="#" class="button">About Us</a>
</div>
</div>
</div>
<div class="swiper-button-next nav-btn"></div>
<div class="swiper-button-prev nav-btn"></div>
<div class="swiper-pagination"></div>
</section>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your image slider beautiful. You can experiment with different CSS properties like colors, fonts, and backgrounds to give a personalized touch to your slider.
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.main {
height: 100vh;
width: 100%;
}
.wrapper,
.slide {
position: relative;
width: 100%;
height: 100%;
}
.slide {
overflow: hidden;
}
.slide::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 10;
}
.slide .image {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide .image-data {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
z-index: 100;
}
.image-data span.text {
font-size: 14px;
font-weight: 400;
color: #fff;
}
.image-data h2 {
font-size: 45px;
font-weight: 600;
color: #fff;
}
a.button {
display: inline-block;
padding: 10px 20px;
border-radius: 25px;
color: #333;
background: #fff;
text-decoration: none;
margin-top: 25px;
transition: all 0.3s ease;
}
a.button:hover {
color: #fff;
background-color: #c87e4f;
}
/* swiper button css */
.nav-btn {
height: 50px;
width: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.nav-btn:hover {
background: rgba(255, 255, 255, 0.4);
}
.swiper-button-next {
right: 50px;
}
.swiper-button-prev {
left: 50px;
}
.nav-btn::before,
.nav-btn::after {
font-size: 25px;
color: #fff;
}
.swiper-pagination-bullet {
opacity: 1;
height: 12px;
width: 12px;
background-color: #fff;
visibility: hidden;
}
.swiper-pagination-bullet-active {
border: 2px solid #fff;
background-color: #c87e4f;
}
@media screen and (max-width: 768px) {
.nav-btn {
visibility: hidden;
}
.swiper-pagination-bullet {
visibility: visible;
}
}
If you encounter any problems while creating your image slider, you can download the source code files for this project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.
it was very good