Responsive Animated Image Slider
Carousel in JavaScript
Video Tutorial of Responsive Animated Image Slider Carousel
Responsive Animated Image Slider Carousel [Source Codes]
To Create Responsive Animated Image Slider Carousel with HTML,CSS and 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 style 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 by clicking download button.
First, paste the following codes into your index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Animated Image Slider Carousel using HTML CSS and JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="slide">
<div class="item" style="background-image: url(https://onlinefindout.com/img/3d-flip-product-card.jpg);">
<div class="content">
<div class="name">3D flip product card</div>
<div class="des">with HTML CSS</div>
<button><a href="Page/3d-flip-product-card-html-css.html">See More</a></button>
</div>
</div>
<div class="item" style="background-image: url(https://onlinefindout.com/img/sticky-navigation-bar-html-css.png);">
<div class="content">
<div class="name">Sticky Navigation</div>
<div class="des">with HTML CSS</div>
<button><a href="Page/sticky-navigationbar-with-html-css.html">See More</a></button>
</div>
</div>
<div class="item" style="background-image: url(https://onlinefindout.com/img/about-us-page-html-css.png);">
<div class="content">
<div class="name">About us page</div>
<div class="des">With HTML CSS</div>
<button><a href="Page/about-us-page-with-html-&-css.html">See More</a></button>
</div>
</div>
<div class="item" style="background-image: url(https://onlinefindout.com/img/Swinging-Lamp.jpg);">
<div class="content">
<div class="name">Swinging Lamp</div>
<div class="des">With HTML CSS</div>
<button><a href="Page/swinging-lamp-html-css.html">See More</a></button>
</div>
</div>
<div class="item" style="background-image: url(https://onlinefindout.com/img/tic-tac-toe-game.png);">
<div class="content">
<div class="name">Tic Tac Toe Game</div>
<div class="des">With HTML CSS AND Javascript</div>
<button><a href="Page/tic-tac-toe-game-with-html-css-javascript.html">See More</a></button>
</div>
</div>
<div class="item" style="background-image: url(https://onlinefindout.com/img/age-calculator-js.png);">
<div class="content">
<div class="name">Age Calculator</div>
<div class="des">With HTML CSS and Javascript</div>
<button><a href="Page/age-calculator-with-HTML-CSS%20-javascript.html">See More</a></button>
</div>
</div>
</div>
<div class="button">
<button class="prev"><i class="fas fa-arrow-left"></i></button>
<button class="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Now paste the following codes into your style.css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position:relative;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
width: 1070px;
height: 450px;
background: #f5f5f5;
box-shadow: 0 30px 50px #dbdbdb;
margin-top: 100px;
}
.container .slide .item{
width: 200px;
height: 250px;
position: absolute;
top: 45%;
transform: translate(0, -50%);
border-radius: 20px;
box-shadow: 0 30px 50px #505050;
background-position: 50% 50%;
background-size: cover;
display: inline-block;
transition: 0.5s;
}
.slide .item:nth-child(1),
.slide .item:nth-child(2){
top: 0;
left: 0;
transform: translate(0, 0);
border-radius: 0;
width: 1070px;
height: 452px;
}
.slide .item:nth-child(3){
left: 50%;
}
.slide .item:nth-child(4){
left: calc(50% + 220px);
}
.slide .item:nth-child(5){
left: calc(50% + 440px);
}
/* here n = 0, 1, 2, 3,... */
.slide .item:nth-child(n + 6){
left: calc(50% + 660px);
opacity: 0;
}
.item .content{
position: absolute;
top: 50%;
left: 100px;
width: 300px;
text-align: left;
color: #eee;
transform: translate(0, -50%);
font-family: system-ui;
display: none;
}
.slide .item:nth-child(2) .content{
display: block;
}
.content .name{
font-size: 40px;
text-transform: uppercase;
font-weight: bold;
opacity: 0;
animation: animate 1s ease-in-out 1 forwards;
}
.content .des{
margin-top: 10px;
margin-bottom: 20px;
opacity: 0;
animation: animate 1s ease-in-out 0.3s 1 forwards;
}
.content button{
padding: 10px 20px;
font-weight: 700;
margin-left: 60px;
border: none;
cursor: pointer;
opacity: 0;
animation: animate 1s ease-in-out 0.6s 1 forwards;
}
.content button:hover{background: #1DADEF;}
.content button a{text-decoration: none;color: #606060;font-weight: 600;font-size: 16px;}
@keyframes animate {
from{
opacity: 0;
transform: translate(0, 100px);
filter: blur(33px);
}
to{
opacity: 1;
transform: translate(0);
filter: blur(0);
}
}
.button{
width: 100%;
text-align: center;
position: absolute;
bottom: 20px;
}
.button button{
width: 100px;
height: 50px;
font-size: 20px;
font-weight: 700;
text-align: center;
background: #209BEE;
border-radius: 8px;
border: none;
cursor: pointer;
margin: 0 5px;
border: 1.5px solid #000000;
transition: 0.3s;
}
.button button:hover{
background: #fff;
}
i{
color:black;
font-size: 34px;
}
Now paste the following codes into your script.js file
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
next.addEventListener('click', function(){
let items = document.querySelectorAll('.item')
document.querySelector('.slide').appendChild(items[0])
})
prev.addEventListener('click', function(){
let items = document.querySelectorAll('.item')
document.querySelector('.slide').prepend(items[items.length - 1]) // here the length of items = 6
})
If you face any difficulties while creating Responsive Animated Image Slider Carousel or your code is not working as expected, you can download the source code files by clicking download button.