Introduction
Image Slider is a way of displaying multiple images, videos or graphics which is created using javascript.
Preview
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-Image Slider</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="stylesheet" href="ImageSlider.css">
<script src="ImageSlider.js"></script>
</head>
<body>
<div class="container">
<div class="slides">
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/20/01/10/glacier-5760277_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2015/07/09/22/45/tree-838667_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2012/09/15/02/22/forest-56930_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2019/10/25/06/07/sky-4576072_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mountain-477832_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2015/11/07/11/46/holly-1031472_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/19/14/43/christmas-tree-5758765_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/12/10/16/19/waterfall-5820721_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/12/09/21/39/city-5818738_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/22/07/11/river-5765785_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/11/24/22/46/prague-5774045_960_720.jpg" alt=""></div>
<div class="slide"><img src="https://cdn.pixabay.com/photo/2020/10/23/06/23/empire-state-building-5677823_960_720.jpg" alt=""></div>
</div>
</div>
<i id="prev" class="fas fa-arrow-left"></i> <i id="next" class="fas fa-arrow-right"></i>
<script>
</script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #ec2F4B;
}
.slides {
display: flex;
width: 900px;
height: 70vh;
margin-top: 50px;
overflow: hidden;
}
.slide {
width: 900px;
min-width: 900px;
text-align: center;
}
img {
height: 100%;
box-shadow: -2px -2px 12px rgba(0, 0, 0, 0.5), 2px 2px 12px rgba(0, 0, 0, 0.5);
}
#prev, #next {
position: absolute;
top: 40%;
font-size: 2rem;
color: white;
cursor: pointer;
transition: ease 0.6s;
}
#prev:hover, #next:hover {
color: rgba(43, 43, 43, 0.918);
}
#prev {
left: calc(50% - 35%);
}
#next {
left: calc(50% + 33%);
}
Javascript Code
var slide, prev, next;
slide = document.getElementsByClassName("slide");
prev = document.getElementById("prev");
next = document.getElementById("next");
let slide_count = 0, size = slide[0].clientWidth;
let length = slide.length;
prev.addEventListener("click", prevMove);
next.addEventListener("click", nextMove);
window.setInterval(nextMove, 3000);
function prevMove()
{
if (slide_count == 0)
{
for (let i = 0; i < length; i++)
slide[i].style.transition = "none";
}
else
{
for (let i = 0; i < length; i++)
slide[i].style.transition = "ease 0.6s";
}
slide_count--;
if (slide_count < 0)
slide_count = length - 1;
for (let i = 0; i < length; i++)
slide[i].style.transform = "translateX( " + (-size * slide_count)+ "px)";
}
function nextMove()
{
if (slide_count == length - 1)
{
for (let i = 0; i < length; i++)
slide[i].style.transition = "none";
}
else
{
for (let i = 0; i < length; i++)
slide[i].style.transition = "ease 0.6s";
}
slide_count++;
if (slide_count >= length)
slide_count = 0;
for (let i = 0; i < length; i++)
slide[i].style.transform = "translateX( " + (-size * slide_count) + "px)";
}
Comments
Post a Comment