Step 1: Write HTML code as below:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="mainContainer">
<div class="slideShowContainer">
<div class="imgContainer">
<img src="images/1.jpg">
</div>
<div class="imgContainer">
<img src="images/2.jpg">
</div>
<div class="imgContainer">
<img src="images/3.jpg">
</div>
<div class="imgContainer">
<img src="images/4.jpg">
</div>
<div onclick="plusSlides(-1)" class="leftArrow">❮</div>
<div onclick="plusSlides(1)" class="rightArrow">❯</div>
</div>
<script src="main.js"></script>
</div>
</body>
</html>
Step 2: Add some Css as below:-
.mainContainer{
width: 100%;
height: 400px;
max-width: 1000px;
margin: auto;
box-shadow: 0px 0px 3px 1px #00000078;
padding: 10px;
}
.slideShowContainer{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.imgContainer{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.imgContainer img{
width: 100%;
height: 100%;
}
.leftArrow,.rightArrow{
width: 50px;
background: #1d090936;
position: absolute;
color: #ffff;
text-align: center;
padding-top:30px;
z-index: 1;
height: 50px;
top: 40%;
user-select: none;
}
.rightArrow{
right: 0;
}
.leftArrow:hover,.rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
/*Moving the slider to the left side*/
.mainContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-fill-mode:forwards;
}
.mainContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
/*moving right side the current slider*/
.mainContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.mainContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
Step 3: Now add the little bit jQuery.
var slideIndex,slides;
function slider(){
slides=document.getElementsByClassName("imgContainer");
slideIndex = 0;
slides[slideIndex].style.opacity=1;
}
slider();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i,current,next,forNext,forCurrent;
if(n>slideIndex) {
if(n >= slides.length)
{
n=0;
}
forCurrent="moveLeftCurrentSlide";
forNext="moveLeftNextSlide";
}
else if(n<slideIndex){
if(n<0)
{
n=slides.length-1;
}
forCurrent="moveRightCurrentSlide";
forNext="moveRightPrevSlide";
}
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className ="imgContainer";
slides[i].style.opacity=0;
}
current.classList.add(forCurrent);
next.classList.add(forNext);
slideIndex=n;
}
Now you are all set!
If you want to download this project click on the link below:-
0 Comments