Подскажите пожалуйста, как сделать бесконечную прокрутку в слайдере по клику?
Если я правильно понимаю логику, необходимо по клику на лету добавлять элемент в начало слайдера, но не совсем понимаю, как это сделать. Может быть есть более оптимальный способ?
Заранее благодарю!
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();
