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

    @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 комментария