Auto Rotate Slider | Image Slider Using Html Css Javascript

Auto Rotate Slider | Image Slider Using Html Css Javascript

Welcome🎉 to Code With Random blog. This blog teaches us how we create an Auto Rotate Slider. We use HTML, Css, and javascript for the Auto Rotate Slider. I hope you enjoy our blog so let’s start with a basic HTML structure for the Auto Rotate Slider. 

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Rotate Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="slider">
          <div class="box1">
          </div>
          <div class="box2">
          </div>
          <div class="box3">
          </div>
          <div class="box4">
          </div>
          <div class="box5">
          </div>
          <div class="box6">
          </div>
          <div class="box7">
          </div>
        </div>
      </div>
      <div id="test"></div>
      <!-- Javascript -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="app.js"></script>
</body>
</html>

There is all the HTML code for the Auto Rotate Slider. Now, you can see an output with an Auto Rotate Slider then we write javascript for the Auto Rotate Slider.

Output

Image Slider
Blank Output because All Html Tag Empty

CSS Code

.container {
  width: 100vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider {
  height: 750px;
  width: 100vw;
  display: flex;
  perspective: 1000px;
  position: relative;
  align-items: center;
}
.box1 {
  background: url("https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box2 {
  background: url("https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box3 {
  background: url("https://images.pexels.com/photos/2356059/pexels-photo-2356059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box4 {
  background: url("https://images.pexels.com/photos/3274903/pexels-photo-3274903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box5 {
  background: url("https://images.pexels.com/photos/3618162/pexels-photo-3618162.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box6 {
  background: url("https://images.pexels.com/photos/4256852/pexels-photo-4256852.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}
.box7 {
  background: url("https://images.pexels.com/photos/1891234/pexels-photo-1891234.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
  background-size: cover;
  background-position: center center;
}

.slider [class*="box"] {
  /*   float: left; */
  overflow: hidden;
  border-radius: 20px;
  transition: all 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  position: absolute;
}
.slider [class*="box"]:nth-child(7),
.slider [class*="box"]:nth-child(1) {
  width: 100vh;
  height: 60vh;
  transform: scale(0.2) translate(-50%, -50%);
  top: 10%;
  z-index: 1;
}
.slider [class*="box"]:nth-child(2),
.slider [class*="box"]:nth-child(6) {
  width: 100vh;
  height: 60vh;
  transform: scale(0.4) translate(-50%, -50%);
  top: 20%;
  z-index: 2;
}
.slider [class*="box"]:nth-child(3),
.slider [class*="box"]:nth-child(5) {
  width: 100vh;
  height: 60vh;
  transform: scale(0.6) translate(-50%, -50%);
  top: 30%;
  z-index: 3;
}
.slider [class*="box"]:nth-child(4) {
  width: 60vw;
  height: 60vh;
  border-color: #c92026;
  color: #fff;
  transform: scale(1) translate(-50%, -50%);
  top: 50%;
  z-index: 4;
}
.slider [class*="box"]:nth-child(1) {
  left: -13%;
}
.slider [class*="box"]:nth-child(2) {
  left: -5%;
}
.slider [class*="box"]:nth-child(3) {
  left: 10%;
}
.slider [class*="box"]:nth-child(4) {
  left: 50%;
}
.slider [class*="box"]:nth-child(5) {
  left: 71%;
}
.slider [class*="box"]:nth-child(6) {
  left: 85%;
}
.slider [class*="box"]:nth-child(7) {
  left: 100%;
}
.slider .firstSlide {
  -webkit-animation: firstChild 1s;
  animation: firstChild 1s;
}
/*Animation for buyers landing page slider*/
@-webkit-keyframes firstChild {
  0% {
    left: 100%;
    transform: scale(0.2) translate(-50%, -50%);
  }
  100% {
    left: -13%;
    transform: scale(0.2) translate(-50%, -50%);
  }
}
@keyframes firstChild {
  0% {
    left: 100%;
    transform: scale(0.2) translate(-50%, -50%);
  }
  100% {
    left: -13%;
    transform: scale(0.2) translate(-50%, -50%);
  }
}

Css Updated output

image slider css

Javascript(jquery) Code

function rotate() {
    var lastChild = $('.slider div:last-child').clone();
    /*$('#test').html(lastChild)*/
    $('.slider div').removeClass('firstSlide')
    $('.slider div:last-child').remove();
    $('.slider').prepend(lastChild)
    $(lastChild).addClass('firstSlide')
  }
  
  window.setInterval(function(){
    rotate()
  }, 4000);

Final output

Auto Rotate Slider

Now that we have completed our javascript section, our updated output with javascript. I hope you like the Auto Rotate Slider. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create an Auto Rotate Slider using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – PedalsUp

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

 

 

Share on:

Leave a Comment