CODEWITHSUNDEEP
javascriptcss
Noamaan Mulla
Noamaan Mulla

Reputation: 83

How to manage a CSS carousel with buttons?

I am trying to make an image carousel which can slide on it's own but it can also be controlled by arrow buttons. I've added keyframes which will control the sliding animation of the slider but for the buttons, I don't know where to begin. Is there any way to add this function to the buttons using javascript?

.carousel {
  overflow: hidden;
}

.carousel figure {
  position: relative;
  width: 600vw;
  animation: 35s slider infinite;
  display: table;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.carousel figure img {
  width: 100vw;
}

@keyframes slider {
  0% {
    left: 0vw;
  }
  14% {
    left: 0vw;
  }
  15% {
    left: -100vw;
  }
  29% {
    left: -100vw;
  }
  30% {
    left: -200vw;
  }
  44% {
    left: -200vw;
  }
  45% {
    left: -300vw;
  }
  59% {
    left: -300vw;
  }
  60% {
    left: -400vw;
  }
  74% {
    left: -400vw;
  }
  75% {
    left: -500vw;
  }
  90% {
    left: -500vw;
  }
  100% {
    left: 0vw;
  }
}

.main_carousel_right_arrow {
  font-size: 2vw;
  padding: 5vw 2vw;
  background-color: rgb(255, 255, 255);
  top: 6%;
  position: absolute;
  right: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.main_carousel_left_arrow {
  font-size: 2vw;
  padding: 5vw 2vw;
  background-color: rgb(255, 255, 255);
  top: 6%;
  position: absolute;
  left: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="carousel">
  <figure>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50"></a>
  </figure>
  <div>
    <span class="main_carousel_left_arrow"><i class="fas fa-arrow-left"></i></span>
    <span class="main_carousel_right_arrow"><i class="fas fa-arrow-right"></i></span>
  </div>
</div>

Upvotes: 1

Views: 1377

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15223

The problem with your slider was that the full animation cycle = 1 iteration, which means that the back and forward buttons cannot be used with this slider, as you have by default. I deleted your @keyframes algorithm, replacing it with a setInterval().

The slider is entirely written in javascript.

Also add transition: 1s to .carousel figure for smooth slide transitions.

In the previous task, I recommended that you use the display: table in the selector .carousel figure. Now you need to replace it with a display: flex.

let anime = document.querySelector('.carousel figure');
let left = document.querySelector('.main_carousel_left_arrow');
let right = document.querySelector('.main_carousel_right_arrow');
var step = 0;

function animate() {
  if (step > -600) {
      anime.style.transform = 'translateX('+ step +'vw)';
    } else {
      anime.style.transform = 'transformX(100vw)';
      step = 100;
  }
}

setInterval(function () {
   step = step - 100;
   animate();
}, 7000);

right.onclick = function() {
  step = step - 100;
  animate(); 
}

left.onclick = function() {
  step = step + 100;
  animate();
}
.carousel {
  overflow: hidden;
}

.carousel figure {
  position: relative;
  width: 600vw;
  transition: 1s;
  display: flex;
  margin: 0;
}

.carousel figure img {
  width: 100vw;
}

.main_carousel_right_arrow {
  font-size: 2vw;
  padding: 5vw 2vw;
  background-color: rgb(255, 255, 255);
  top: 6%;
  position: absolute;
  right: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.main_carousel_left_arrow {
  font-size: 2vw;
  padding: 5vw 2vw;
  background-color: rgb(255, 255, 255);
  top: 6%;
  position: absolute;
  left: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="carousel">
  <figure>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50"></a>
    <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50"></a>
  </figure>
  <div>
    <span class="main_carousel_left_arrow"><i class="fas fa-arrow-left"></i></span>
    <span class="main_carousel_right_arrow"><i class="fas fa-arrow-right"></i></span>
  </div>
</div>

Upvotes: 1

Related Questions