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

Бесконечный слайдер на чистом JS

Делаю слайдер на чистом JS с помощью setInterval. Как можно добиться бесконечной прокрутки слайдов?

let sliderWrapper = document.querySelector(".slider-wrapper"); let sliderElements = document.querySelectorAll(".slider-item"); const sliderItemWidth = sliderElements[0].clientWidth; let counter = 1; let translation = 0; const nextSlide = function() < let start = Date.now(); // запомнить время начала let timer = setInterval(function() < let timePassed = Date.now() - start; nextBtn.classList.add("inactive-button"); if (timePassed >sliderItemWidth) < setTimeout(() =>< nextBtn.classList.remove("inactive-button"); >, 400); clearInterval(timer); translation = sliderItemWidth * counter; counter++; return; > draw(timePassed); >, 0); function draw(timePassed) < sliderElements.forEach((item) =>< item.style.right = translation + timePassed + "px"; >); > >; const prevSlide = function() < let start = Date.now(); let timer = setInterval(function() < let timePassed = Date.now() - start; prevBtn.classList.add("inactive-button"); if (timePassed >sliderItemWidth + 1) < setTimeout(() =>< prevBtn.classList.remove("inactive-button"); >, 400); clearInterval(timer); translation = sliderItemWidth * (counter - 2); counter--; return; > draw(timePassed); >, 0); function draw(timePassed) < sliderElements.forEach((item) =>< item.style.right = translation - timePassed + "px"; >); > >; nextBtn.addEventListener("click", nextSlide); prevBtn.addEventListener("click", prevSlide);

body < margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #fff; >.main < display: flex; justify-content: center; align-items: center; >.slider < position: relative; overflow: hidden; width: 800px; >.slider-wrapper < display: flex; >.slider-item < flex: 0 0 100%; max-width: 100%; position: relative; >.slider-item-content < height: 250px; background: coral; >.slider-control < position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; color: #fff; text-align: center; opacity: 0.5; height: 50px; transform: translateY(-50%); background: rgba(0, 0, 0, .5); >.slider-control:hover, .slider-control:focus < color: #fff; text-decoration: none; outline: 0; opacity: .9; >.slider-control-left < left: 0; >.slider-control-right < right: 0; >.slider-control::before < content: ''; display: inline-block; width: 20px; height: 20px; background: transparent no-repeat center center; background-size: 100% 100%; >.slider-control-left::before < background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); >.slider-control-right::before < background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); >.slider-item>div < line-height: 250px; font-size: 100px; text-align: center; >.inactive-button

 
 
 
 
 
1
 
 
 
2
 
 
 
3
 
 
 
4
 
 
 
 

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

Привет всем.Подскажите, пожалуйста, как сделать бесконечную прокрутку слайдера?
Гуглить — гуглил, не смог найти то, что мне нужно.
Слик слайдеры и подобные тоже не предлагать — я пытаюсь написать свой
Как сделать чтобы при клике вперед на последнем слайде слайдер начинался с первого?
Понимаю, что как-то клонированием, но как реализовать не понимаю пока
HTML-код

          
 
 
ddd
 
111
 
22
 
 
 
Prev Next 
 
     

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 = `$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($px)`; >

• Вопрос задан более двух лет назад
• 7990 просмотров

1 комментарий

Средний 1 комментарий

Assholiday @Assholiday

Удаление нулевого элемента слайдера и добавка его в конец должна производиться внутри коллбека листенера.
Но за этот код спасибо.
Опираясь на твой код я сделал однорукого бандита.

Решения вопроса 0
Ответы на вопрос 3

approximate solution @approximate_solution
JS Developer. Angular\React\Vue\Ember
Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать

Всем добрый день.. бесконечный слайдер на js это простейшая штука, я не могу понять почему нет ни одного ролика на ютуб об этом, вернее есть но они очень сложно реализованы, куча стилей, смещение слайдов, и очень не понятно. Предлагаю свой вариант. Стилей здесь не будет, это по желанию сами установите.. только логика ..
index .html содержит:

добавил немного классов для удобства, но это не обязательно. главное что нам нужно это две кнопки и блок для вывода изображений.. дальше создаем и подключаем
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 =`>` nextBtn.onclick = () =>< if(i < images.length - 1)< i++ >else < i = 0 >outImg.innerHTML =`>` > prevBtn.onclick = () => < if(i >0 )< i-- >else < i = images.length-1 >outImg.innerHTML =`>` >

поясню.. Получаем в переменные наши кнопки и блок для вывода, также создаем переменные содержащие пути к картинкам и добавляем их в массив. Дальше создаем переменную для изменения индекса массива и выводим изображение на экран..
Вешаем события на кнопки и по нажатию меняем индекс массива и показываем картинку.
У этого слайдера много плюсов, простота, легко стилизовать и адаптировать, нету некрасивого эффекта возврата к первому слайду как в случае смещения ленты, слайдер может содержать большое количество изображений, не меняя размер html кода.

бесконечная прокрутка карусели на javascript?

В общем. Идея такая. Есть обертка, в ней абсолютным позиционированием размещаются слайдеры. Каждому слайду даю позицию left. При этом каждый слайдер растягивается на всю ширину экрана, то бишь у первого left: 0%, у второго left:100% и тд. Данные позиции заношу в массив move. При клике на prev или next вызываю функцию plusSlide где меняю значения массива move и естественно значения left у слайдов. Получается анимация листания. Сложность создать бесконечную прокрутку. Общую идею понимаю, но реализовать совсем не получается. Скрины прилагаю : 1). html разметка, css стили, скрин слайдера

JS:
window.addEventListener(‘DOMContentLoaded’, function()

let items = document.getElementsByClassName(‘slider-item’),
sliderWrap = document.getElementsByClassName(‘slider-wrap’)[0],
arrayHeight = [],
prev = document.getElementsByClassName(‘prev-wrap’)[0],
next = document.getElementsByClassName(‘next-wrap’)[0],
cirklesWrap = document.getElementsByClassName(‘cirkles’)[0],
cirkles = document.getElementsByClassName(‘cirkle’),
slideIndex = 1;

function heightMax() for (let i = 0; i < items.length; i++) arrayHeight.push(items[i].offsetHeight);
>
sliderWrap.style.height = getMaxOfArray(arrayHeight) + ‘px’;
>
heightMax();

window.addEventListener(‘resize’, function() heightMax();
>);

function getMaxOfArray(numArray) return Math.max.apply(null, numArray);
>

let move = new Array;
arrayMove();
function arrayMove() for (let i = 0; i < items.length; i++) move.push(i*100);
items[i].style.left = move[i] + ‘%’;
>
>

function plusSlide(index) if (index < 0) for (let i = 0; i < items.length; i++) move[i] += 100;
items[i].style.left = move[i] + ‘%’;
>
>
if (index > 0) for (let i = 0; i < items.length; i++) move[i] -= 100;
items[i].style.left = move[i] + ‘%’;
>
>
>

let a = 0;
function cirkleActive(n) a += n;
for (let i = 0; i < cirkles.length; i++) cirkles[i].classList.remove('cirkle-active');
>
if (a > cirkles.length — 1) a = 0;
>
if (a < 0) a = cirkles.length - 1;
>
if (a < cirkles.length && a >= 0) cirkles[a].classList.add(‘cirkle-active’);
>

prev.addEventListener(‘click’, () => plusSlide(-1);
cirkleActive(-1);
>);

next.addEventListener(‘click’, () => plusSlide(1);
cirkleActive(1);
>);

>);

Дополнен 5 лет назад

Пожалуйста. Прошу ответ с минимальным примером. Саму идею понимаю, не могу реализовать нормально) Заранее спасибо)

Курсы javascript

Помогите пожалуйста на чистом js написать слайдер, суть его в том что при нажатии влево картинка уходит влево и появляется следующая, и соответственно, вправо, при всем при этом когда заканчиваются фотографии должен происходить цикл, то есть опять первая фотография должна сменять последнюю, большое спасибо всем отозвавшимся

http://learn.javascript.ru/play/AbKn5
Я понимаю что строю велосипед есть много примеров на jquery, но я хочу ради урока создать самому с нуля, подскажите что делать надо

Последний раз редактировалось imediasun1, 18.11.2013 в 23:31 .
19.11.2013, 00:16
Регистрация: 23.06.2011
Сообщений: 1,165

http://learn.javascript.ru/play/zfzaeb
извиняюсь за нецензурщину в ссылке, такой адрес выдали, я не виноват

19.11.2013, 00:59
Регистрация: 23.12.2012
Сообщений: 437
Спасибо большое очень благодпрен
можете прокомментировать чтобы легче было разобраться в логике?

Последний раз редактировалось imediasun1, 19.11.2013 в 01:06 .
19.11.2013, 09:08
Регистрация: 23.06.2011
Сообщений: 1,165

var picsNum = document.getElementById('slider').getElementsByTagName('img').length; // считаем сколько картинок заложено в слайдер var now = 0; // первой будет выведена картинка с индексом 0 (т.е. первая) var sliderOffset = []; for (var i = 0; i < picsNum; i++) sliderOffset.push(-i * 104 + 'px'); // создаем массив с вариантами смещения слайдера для каждой картинки console.table(sliderOffset); // для отладки, это я забыл убрать. Выводит в консоль получившийся массив. Можете удалить строку document.getElementById('left_arrow').onclick = function() < --now;// уменьшаем индекс картинки if(now < 0) now = picsNum - 1; // если залезли в отрицательную область, делаем текущей последнюю картинку document.getElementById('slider').style.left = sliderOffset[now]; //смещаем слайдер в соответствии с текущей картинкой >document.getElementById('right_arrow').onclick = function() < ++now; // увеличиваем индекс картинки if(now >picsNum - 1) now = 0; // если индекс больше, чем может быть, делаем текущей первую картинку document.getElementById('slider').style.left = sliderOffset[now]; // см. выше >