Description
This simple and interactive slider looks amazing and beautiful when it is live today i will share source of this slider with you. This slider is purely made with css and jquery.Hello guys today we are going to build Infinite Slider With Css Jquery. as you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.
Save It As index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Infinite slider with CSS & jQuery</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="slider right">
<div class="arrow left">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
<path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
</svg>
</div>
<div class="container-images">
<img class="active" src="https://picsum.photos/600/400/?image=661">
<img src="https://picsum.photos/600/400/?image=57">
<img src="https://picsum.photos/600/400/?image=976">
<img src="https://picsum.photos/600/400/?image=476">
<img src="https://picsum.photos/600/400/?image=47">
<img src="https://picsum.photos/600/400/?image=46">
</div>
<div class="arrow right">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
<path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
</svg>
</div>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>
Save It As style.css:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #ee0979;
background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
background: linear-gradient(to right, #ff6a00, #ee0979);
width: 100vw;
height: 100vh;
}
.wrapper {
padding: 100px 0;
width: 550px;
}
.slider {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.slider .arrow {
cursor: pointer;
width: 50px;
}
.slider .arrow:hover {
opacity: .8;
}
.slider .arrow.right {
transform: rotate(180deg);
}
.slider .container-images {
position: relative;
width: 400px;
height: 250px;
overflow: hidden;
-webkit-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
}
.slider .container-images img {
width: 100%;
position: absolute;
top: 50%;
transition-duration: .5s;
transform: translateY(-50%);
}
.slider.right .container-images img {
left: -100%;
z-index: -1;
}
.slider.right .container-images img.active {
z-index: 1;
left: 0;
}
.slider.right .container-images img.to_right {
left: 100%;
}
.slider.left .container-images img {
right: -100%;
z-index: -1;
}
.slider.left .container-images img.active {
z-index: 1;
right: 0;
}
.slider.left .container-images img.to_left {
right: 100%;
}
Save It As index.js:
$(window).on("load", function() {
let nbImg = 0;
$(".slider .container-images img").each(function() {
nbImg += 1;
});
$(".slider .arrow").click(function() {
let n = imageActive();
$(".slider").removeClass("right left");
if($(this).hasClass("left")) {
n -= 1;
$(".slider").addClass("left");
setTimeout(function() {
$(".slider .container-images img.active").addClass("to_left");
}, 50)
}
else if($(this).hasClass("right")) {
n += 1;
$(".slider").addClass("right");
setTimeout(function() {
$(".slider .container-images img.active").addClass("to_right");
}, 50)
}
if(n > nbImg) n = 1;
if(n < 1) n = nbImg;
setTimeout(function() {
$(".slider .container-images img").removeClass("active");
$(".slider .container-images img:nth-child("+n+")").addClass("active");
setTimeout(function() {
$(".slider .container-images img").removeClass("to_left");
$(".slider .container-images img").removeClass("to_right");
}, 500)
}, 50)
});
function imageActive() {
let n = 1;
$(".slider .container-images img").each(function(index) {
if($(this).hasClass("active")) {
n += index;
}
});
return n;
}
});