Table of Contents
- Create an Image Slider Layout in HTML (index.html)
- Style the image slider and heading using CSS (styles.css)
- Create the script to make the slider work (script.js)
- Video Tutorial
- Subscribe Channel For More Tutorials
- You may also like
Let’s create an image slider with Argentina’s Victory Images in World Cup 2022 along with a glowing animated text congratulating Argentina. See a demo image below:
Create an Image Slider Layout in HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images Slider</title>
<!-- include font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- link styles.css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- create the layout for the slider -->
<h1> Congrats Argentina! </h1>
<div class="slider-container">
<div class="slider">
<img src="1.jpg" alt="">
</div>
<div class="slider">
<img src="2.jpg" alt="">
</div>
<div class="slider">
<img src="3.jpg" alt="">
</div>
<div class="slider">
<img src="4.jpg" alt="">
</div>
<div class="slider">
<img src="5.jpg" alt="">
</div>
</div>
<div class="buttons">
<button id="next"><i class="fas fa-chevron-right"></i></button>
<button id="prev"><i class="fas fa-chevron-left"></i></button>
</div>
<!-- add jquery using cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- add the script file -->
<script src="script.js"></script>
</body>
</html>Style the image slider and heading using CSS (styles.css)
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
background: rgb(51, 51, 41);
font-family: sans-serif;
}
body h1 {
font-size: 4rem;
color: #fff;
margin-bottom: 20px;
position: absolute;
top: 10%;
text-transform: uppercase;
/* add text color animation */
animation: text-color 10s infinite;
/* add text glow */
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px rgb(232, 179, 179),
0 0 20px #fff,
0 0 25px rgb(101, 75, 75),
0 0 30px #fff,
0 0 35px #fff;
}
@keyframes text-color {
0% {
color: rgb(160, 91, 91);
}
10% {
color: rgb(104, 87, 165);
}
20% {
color: rgb(82, 90, 163);
}
30% {
color: rgb(126, 71, 171);
}
40% {
color: rgb(84, 107, 199);
}
50% {
color: rgb(79, 53, 138);
}
60% {
color: rgb(106, 79, 133);
}
70% {
color: rgb(77, 122, 126);
}
80% {
color: rgb(92, 132, 193);
}
90% {
color: rgb(109, 223, 111);
}
100% {
color: rgb(160, 91, 91);
}
}
.slider-container {
width: 900px;
height: 500px;
box-shadow: 0 2px 10px #000;
display: flex;
overflow: hidden;
}
.slider-container .image-number {
position: absolute;
z-index: 1;
background: #fff;
color: #000;
padding: 10px;
font-weight: bold;
font-size: 20px;
box-shadow: 0 0 5px #000;
}
.slider-container img {
width: 900px;
height: 500px;
object-fit: cover;
transform: translateX(0px);
transition: transform 400ms ease-in-out;
}
.buttons {
position: absolute;
width: 100%;
}
.buttons button {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
top: 50%;
transform: translateY(-50%);
}
.buttons button:hover {
background: #ccc;
}
.buttons #prev {
left: 25%;
}
.buttons #next {
right: 25%;
}Create the script to make the slider work (script.js)
const sliders = $('.slider');
const imageNumber = $('.image-number');
const nextBtn = $('#next');
const prevBtn = $('#prev');
let index = 0;
imageNumber.html(`${index+1} / ${sliders.length}`);
let sliderInterval;
runSlider();
nextBtn.click(function() {
clearInterval(sliderInterval);
index++;
if(index < sliders.length) {
changeSlide(index);
} else {
index = 0;
changeSlide(index);
}
runSlider();
});
prevBtn.click(function() {
clearInterval(sliderInterval);
index--;
if(index >= 0) {
changeSlide(index);
} else {
index = sliders.length - 1;
changeSlide(index);
}
runSlider();
});
function changeSlide(index) {
sliders.map((i) => {
if(i == index) {
sliders.find("img").css({'transform':`translateX(-${index*900}px)`});
imageNumber.html(`${index+1} / ${sliders.length}`);
}
});
}
function runSlider() {
sliderInterval = setInterval(function() {
changeSlide(index++);
if(index > sliders.length - 1) index = 0;
}, 3000);
}