Всем добрый день.. бесконечный слайдер на js это простейшая штука, я не могу понять почему нет ни одного ролика на ютуб об этом, вернее есть но они очень сложно реализованы, куча стилей, смещение слайдов, и очень не понятно. Предлагаю свой вариант. Стилей здесь не будет, это по желанию сами установите.. только логика ..
index .html содержит:
<body>
<div class="wrapper">
<div class="slider">
<div class="container">
<div class="slider__block">
<div class="slider__img">
</div>
<div class="slider__btn">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
добавил немного классов для удобства, но это не обязательно. главное что нам нужно это две кнопки и блок для вывода изображений.. дальше создаем и подключаем
index.js файл который содержит:
const prevBtn = document.querySelector('.prev')
const nextBtn = document.querySelector('.next')
const outImg = document.querySelector('.slider__img')
const art1 = './img/art1.jpg'
const art2 = './img/art2.jpg'
const art3 = './img/art3.jpg'
const art4 = './img/art4.jpg'
const art5 = './img/art5.jpg'
const images = [art1, art2, art3, art4, art5]
let i = 0
outImg.innerHTML =`<img src=${images[i]}>`
nextBtn.onclick = () =>{
if(i < images.length - 1){
i++
}else{
i = 0
}
outImg.innerHTML =`<img src=${images[i]}>`
}
prevBtn.onclick = () =>{
if(i > 0 ){
i--
}else{
i = images.length-1
}
outImg.innerHTML =`<img src=${images[i]}>`
}
поясню.. Получаем в переменные наши кнопки и блок для вывода, также создаем переменные содержащие пути к картинкам и добавляем их в массив. Дальше создаем переменную для изменения индекса массива и выводим изображение на экран..
Вешаем события на кнопки и по нажатию меняем индекс массива и показываем картинку.
У этого слайдера много плюсов, простота, легко стилизовать и адаптировать, нету некрасивого эффекта возврата к первому слайду как в случае смещения ленты, слайдер может содержать большое количество изображений, не меняя размер html кода.