@M1sty1
Занимаюсь версткой

Как сделать бесконечный слайдер?

Привет всем.Подскажите, пожалуйста, как сделать бесконечную прокрутку слайдера?
Гуглить - гуглил, не смог найти то, что мне нужно.
Слик слайдеры и подобные тоже не предлагать - я пытаюсь написать свой
Как сделать чтобы при клике вперед на последнем слайде слайдер начинался с первого?
Понимаю, что как-то клонированием, но как реализовать не понимаю пока
HTML-код
<!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" />
        <link rel="stylesheet" href="css/style.css" />
        <title>Document</title>
    </head>
    <body>
        <div class="wrapper">
            <div class="slider-container">
                <div class="slider-track">
                    <div class="slider-item">ddd</div>
                    <div class="slider-item">111</div>
                    <div class="slider-item">22</div>
                   
                </div>
            </div>
            <div class="slider-buttons">
                <button class="btn-prev">Prev</button>
                <button class="btn-next">Next</button>
            </div>
        </div>
       
        <script
            src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"
        ></script>
        <script src="js/script.js"></script>
        <script src="js/scriptJq.js"></script>
    </body>
</html>

JS-Код
let position = 0;
//Сколько будет показывать элеменов
const slidesToShow = 1;
//Сколько будет скролить
const slidesToScroll = 1;
const container = document.querySelector(".slider-container");
// лист с айтемами
const track = document.querySelector(".slider-track");
const btnPrev = document.querySelector(".btn-prev");
const btnNext = document.querySelector(".btn-next");
//Количество элементов
const items = document.querySelectorAll(".slider-item");
const itemsCount = items.length;
//Получаем ширину каждого элемента
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;

for(let i = 0; i < itemsCount; i++) {
    const cloneItem = items[i].cloneNode(true);
    cloneItem.classList.add('cloneNode')
    track.appendChild(cloneItem);
}
items.forEach((item) => {
    item.style.minWidth = `${itemWidth}px`;
})
btnNext.addEventListener('click', () => {
    const itemsLeft = itemsCount - (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
    console.log(itemsLeft);
    
    position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth; ;
    setPosition()
   /*  checkButtons() */
});
btnPrev.addEventListener('click', () => {
    const itemsLeft = Math.abs(position) / itemWidth;
    position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
    setPosition()
    /* checkButtons() */
});

const setPosition = () => {
    track.style.transform = `translateX(${position}px)`;
}
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 2
webdisigner
@webdisigner
примерно накидал

тебе главное рассчитать индекс следующего или предыдущего элемента
активный элемент у меня носит класс .active который помечен зеленым цветом
Ответ написан
Ваш ответ на вопрос

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

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