Как зациклить элементы в слайдере-карусели?

Подскажите пожалуйста, как сделать бесконечную прокрутку в слайдере по клику?
Если я правильно понимаю логику, необходимо по клику на лету добавлять элемент в начало слайдера, но не совсем понимаю, как это сделать. Может быть есть более оптимальный способ?
Заранее благодарю!

https://jsfiddle.net/Logic2/0f1u592x/58/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<section class="container">
  <div class="slider">
    <div class="slide slide1"></div>
    <div class="slide slide2"></div>
    <div class="slide slide3"></div>
    <div class="slide slide4"></div>
    <div class="slide slide5"></div>
  </div>
  <button class="btn">Next</button>
</section>
</body>
</html>


.container {
  max-width: 300px;
  margin: auto;
  overflow: hidden;
}
.slider {
  background: #eee;
  display: flex;
  width: 500px;
  border: solid;
}
.slide {
  width: 200px;
  height: 100px;
  margin-right: 10px;
}
.slide1 {
  background: #f3ca63;
}
.slide2 {
  background: #d06c65;
}
.slide3 {
  background: #6579d0;
}
.slide4 {
  background: #65d073;
}
.slide5 {
  background: #ba65d0;
}
.btn {
  margin: 2rem;
}


function sliderFunc() {
    let sliderBox = document.querySelector('.slider');
    let tapToRightBtn = document.querySelector('.btn');

    function sliderNext() {
        sliderBox.style.transform += 'translateX(-100px)';
        sliderBox.style.transition = '0.3s';
    }
    tapToRightBtn.addEventListener('click', sliderNext);
}
sliderFunc();
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы