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

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

Привет всем.Подскажите, пожалуйста, как сделать бесконечную прокрутку слайдера?
Гуглить - гуглил, не смог найти то, что мне нужно.
Слик слайдеры и подобные тоже не предлагать - я пытаюсь написать свой
Как сделать чтобы при клике вперед на последнем слайде слайдер начинался с первого?
Понимаю, что как-то клонированием, но как реализовать не понимаю пока
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)`;
}
  • Вопрос задан
  • 10289 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
approximate_solution
@approximate_solution
JS Developer. Angular\React\Vue\Ember
https://medium.com/@claudiaconceic/infinite-plain-...
Ответ написан
Комментировать
Комментировать
@petrplot
Всем добрый день.. бесконечный слайдер на 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 кода.
Ответ написан
3 комментария
3 комментария
webdisigner
@webdisigner
примерно накидал

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Разработка алгоритма на python (Data engineering)
21 нояб. 2024, в 23:30
300000 руб./за проект
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Ещё заказы