Infinite Slider With Css Jquery
close
Infinite Slider With Css Jquery

Infinite Slider With Css Jquery

Infinite Slider With Css Jquery

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>


Without CSS our this script (Infinite Slider With Css Jquery) will never look beautiful. So here we are the HTML markup is ready now we have to customize our HTML and it can be done using CSS so below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.


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%;
}


So we have written HTML markup and customised it and now we will add some functionality in this project (Infinite Slider With Css Jquery). To make this project (Infinite Slider With Css Jquery) work properly so for that we will use JavaScript. So here is a JavaScript for our project (Infinite Slider With Css Jquery) and also save it with the filename as provided.Make a new directory called js and put this file to that directory.


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;
 }

});

Conclusion :

So here we are we have done and our project Infinite Slider With Css Jquery is ready now you can save all the files as provided. like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.


  • Infinite Slider With Css Jquery
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Infinite Slider With Css Jquery) File :

Infinite Slider With Css Jquery.zip
File Size 2.14 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start autometically then click Download Sterted Button Above to download it manually.


I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.
Disqus Codes

No comments

Notifications

Disqus Logo