Image slider are a popular and attractive way to display content on websites. They offer smooth transitions, text overlays, and easy navigation, making them perfect for banners, portfolios, or product galleries. Responsive image slider enhance the user experience by making content more interactive and dynamic.
In this blog article I am going to show how to apply HTML, CSS and JavaScript to create a responsive image slider. The slider will contain a banner image, text, navigation buttons, and pagination tabs. We will use Swiper library. To make the slider fresh, touch-friendly and fully responsive,
By the end of this tutorial, you’ll have a solid idea of how HTML, CSS, and JavaScript work to create a dynamic responsive image slider. You will also learn how to make layouts responsive and sharpen your JavaScript logic skills, which will help you in your web development journey.
Steps to Create Image Slider in HTML CSS & JavaScript
Use these simple, step-by-step steps for building a responsive image slider with HTML, CSS, and JavaScript:
- Create a folder with any name you like, like, image-slider.
- Inside it, create the required files:
index.html,style.css, andscript.js. - After downloading download image folder in project directory. This folder contains all the images used on this slider.
In your Index.html file, you can start by setting up the basic HTML structure for the image slider. Include swiper and Google Fonts CDN link to enable smooth sliding functionality and access to navigation icons (Prev/Next).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider | CodingTutorials</title>
<link rel="stylesheet" href="style.css">
<!-- Linking Google Fonts for Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0,0" />
<!-- Linking Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>
<body>
<div class="slider-container">
<!-- Slider List Items -->
<div class="slider-wrapper swiper-wrapper">
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 01</h3>
<h2 class="slide-title">Lorem ipsum dolor sit amet elit delectus!</h2>
<p class="slide-description">Lorem ipsum dolor sit amet consectetur adipisicing elit repellendus harum voluptates.</p>
<a href="#" class="slide-button"><span>Learn More</span></a>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 02</h3>
<h2 class="slide-title">Sed ut perspiciatis unde omnis iste natus error sit!</h2>
<p class="slide-description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
<a href="#" class="slide-button"><span>Learn More</span></a>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 03</h3>
<h2 class="slide-title">Nemo enim ipsam voluptatem quia voluptas!</h2>
<p class="slide-description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
<a href="#" class="slide-button"><span>Learn More</span></a>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 04</h3>
<h2 class="slide-title">Neque porro quisquam est qui dolorem!</h2>
<p class="slide-description">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
<a href="#" class="slide-button"><span>Learn More</span></a>
</div>
</div>
<div class="slider-item swiper-slide">
<div class="slide-content">
<h3 class="slide-subtitle">Slide 05</h3>
<h2 class="slide-title">Quis autem velum iure reprehen derit qui voluptate!</h2>
<p class="slide-description">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
<a href="#" class="slide-button"><span>Learn More</span></a>
</div>
</div>
</div>
<!-- Slider Pagination -->
<div class="slider-controls">
<ul class="slider-pagination">
<div class="slider-indicator"></div>
<li class="slider-tab current">Lorem ipsum doloriums viconsetur</li>
<li class="slider-tab">Ipsum leositea pellentes nisiutoret</li>
<li class="slider-tab">Aenean consectetur blandit dictum</li>
<li class="slider-tab">Vestibulum antea primis faucibs</li>
<li class="slider-tab">Molestas minus conse alquid sed</li>
</ul>
</div>
<!-- Slider Navigations (Prev/Next) -->
<div class="slider-navigations">
<button id="slide-prev" class="material-symbols-rounded">arrow_left_alt</button>
<button id="slide-next" class="material-symbols-rounded">arrow_right_alt</button>
</div>
</div>
<!-- Linking Swiper Script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Linking Custom Script -->
<script src="script.js"></script>
</body>
</html>
In your style.css file, style your image slider to get an attractive, modern, and responsive design. Experiment with colors, fonts, and backgrounds to improve the design.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
.slider-container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.slider-wrapper .slider-item {
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}
.slider-wrapper .slider-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: grayscale(20%);
background-image: url("images/img-1.jpg");
background-size: cover;
background-position: center;
}
.slider-wrapper .slider-item:nth-child(2):before {
background-image: url("images/img-2.jpg");
}
.slider-wrapper .slider-item:nth-child(3):before {
background-image: url("images/img-3.jpg");
}
.slider-wrapper .slider-item:nth-child(4):before {
filter: grayscale(25%) brightness(80%);
background-image: url("images/img-4.jpg");
}
.slider-wrapper .slider-item:nth-child(5):before {
background-image: url("images/img-5.jpg");
}
.slider-wrapper .slider-item .slide-content {
position: relative;
z-index: 10;
color: #fff;
width: 100%;
opacity: 0;
margin: 0 auto;
max-width: 1400px;
padding: 0 20px 10px;
}
.slider-item.swiper-slide-active .slide-content {
animation: animate_opacity 0.8s 0.6s linear forwards;
}
@keyframes animate_opacity {
100% {
opacity: 1;
}
}
.slider-wrapper .slider-item .slide-content > * {
max-width: 35%;
}
.slider-item .slide-content .slide-title {
font-size: 1.5rem;
font-weight: 700;
margin-top: 5px;
opacity: 0;
text-transform: uppercase;
transform: translateY(60%);
}
.slider-item .slide-content .slide-subtitle {
font-size: 1rem;
font-weight: normal;
opacity: 0;
transform: translateY(60%);
}
.slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {
animation: animate_text 0.6s 0.6s linear forwards;
}
@keyframes animate_text {
100% {
opacity: 1;
transform: translateY(0);
}
}
.slider-item .slide-content .slide-description {
margin-top: 25px;
line-height: 25px;
opacity: 0;
transform: translateY(60%);
}
.slider-item.swiper-slide-active .slide-description {
animation: animate_text 0.6s 1s linear forwards;
}
.slider-item .slide-content .slide-button {
display: block;
margin-top: 45px;
color: #fff;
width: 0;
padding: 13px 0;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
border: 2px solid #fff;
transition: 0.5s ease;
opacity: 0;
white-space: nowrap;
}
.slider-item.swiper-slide-active .slide-button {
animation: animate_button 0.5s 1.3s linear forwards;
}
@keyframes animate_button {
100% {
width: 250px;
opacity: 1;
}
}
.slider-item .slide-content .slide-button span {
opacity: 0;
}
.slider-item.swiper-slide-active .slide-button span {
animation: animate_opacity 0.5s 1.5s linear forwards;
}
.slider-item .slide-content .slide-button:hover {
color: #000;
background: #fff;
}
.slider-container .slider-controls {
position: absolute;
bottom: 45px;
z-index: 30;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.slider-controls .slider-pagination {
display: flex;
list-style: none;
margin: 0 auto;
max-width: 1400px;
padding: 0 20px;
position: relative;
justify-content: space-between;
}
.slider-pagination .slider-indicator {
position: absolute;
bottom: 0;
border-bottom: 2px solid #fff;
transition: 0.4s ease-in-out;
}
.slider-pagination .slider-tab {
color: #DBDADA;
padding: 20px 30px;
cursor: pointer;
text-align: center;
font-size: 0.85rem;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.slider-controls .slider-tab.current {
color: #fff;
}
.slider-navigations button {
position: absolute;
top: 50%;
color: #fff;
z-index: 20;
border: none;
height: 40px;
width: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: #202022;
transform: translateY(-50%);
transition: 0.4s ease;
}
.slider-navigations button:hover {
background: #323235;
}
.slider-navigations button.swiper-button-disabled {
display: none;
}
.slider-navigations button#slide-prev {
left: 20px;
}
.slider-navigations button#slide-next {
right: 20px;
}
@media (max-width: 1536px) {
.slider-wrapper .slider-item .slide-content,
.slider-controls .slider-pagination {
width: 85%;
}
}
@media (max-width: 1024px) {
.slider-wrapper .slider-item .slide-content,
.slider-controls .slider-pagination {
width: 100%;
}
.slider-wrapper .slider-item .slide-content > * {
max-width: 66%;
}
.slider-container .slider-controls {
bottom: 50px;
}
@keyframes animate_button {
100% {
width: 100%;
opacity: 1;
}
}
.slider-navigations button {
top: unset;
bottom: -15px;
background: none;
}
.slider-navigations button:hover {
background: none;
}
}
@media (max-width: 768px) {
.slider-wrapper .slider-item .slide-content > * {
max-width: 100%;
}
}
In your script.js file, add JavaScript to bring the functionality to your image slider. This code initializes the swiper and configures various methods to control the behavior of the slider, including navigation, pagination, and autoplay.
const sliderControls = document.querySelector(".slider-controls");
const sliderTabs = sliderControls.querySelectorAll(".slider-tab");
const sliderIndicator = sliderControls.querySelector(".slider-indicator");
// Update the indicator
const updateIndicator = (tab, index) => {
document.querySelector(".slider-tab.current")?.classList.remove("current");
tab.classList.add("current");
sliderIndicator.style.transform = `translateX(${tab.offsetLeft - 20}px)`;
sliderIndicator.style.width = `${tab.getBoundingClientRect().width}px`;
// Calculate the scroll position and scroll smoothly
const scrollLeft = sliderTabs[index].offsetLeft - sliderControls.offsetWidth / 2 + sliderTabs[index].offsetWidth / 2;
sliderControls.scrollTo({ left: scrollLeft, behavior: "smooth" });
}
// Initialize swiper instance
const swiper = new Swiper(".slider-container", {
effect: "fade",
speed: 1300,
autoplay: { delay: 4000 },
navigation: {
prevEl: "#slide-prev",
nextEl: "#slide-next",
},
on: {
// Update indicator on slide change
slideChange: () => {
const currentTabIndex = [...sliderTabs].indexOf(sliderTabs[swiper.activeIndex]);
updateIndicator(sliderTabs[swiper.activeIndex], currentTabIndex);
},
reachEnd: () => swiper.autoplay.stop(),
},
});
// Update the slide on tab click
sliderTabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
swiper.slideTo(index);
updateIndicator(tab, index);
});
});
updateIndicator(sliderTabs[0], 0);
window.addEventListener("resize", () => updateIndicator(sliderTabs[swiper.activeIndex], 0));
That’s it! If you’ve added the code correctly, you’re ready to see and interact with your image slider. Open the index.html file in your favorite browser to see the slider project in action.
Conclusion and final words
By following this guide, you will have created a responsive, interactive image slider that not only enhances your coding skills but also adds functionality and visual appeal to your website. Whether you use SwiperJS for ease of use or choose to build a custom slider from scratch, you’ll have gained valuable insight into slider development.
Feel free to customize the slider to suit your needs and experiment with different settings. For more options related customization, check out the SwiperJS documentation.
If you encounter any problems when creating your image slider, you can download the source code files for this project for free by clicking the “Download” button. You can also watch its live demo by clicking on “Watch Live” button.
Image Slider Source Code
Send download link to:
