Как сделать визуальную зацикленность карусели?

Question

[Вячеслав Лебедев]

Добрый день!
Как сделать визуальную зацикленность карусельки?
К примеру: долистываем до последнего кадра, и когда листаем дальше, визуально будет похоже, что идет продолжение, но на самом деле начинаем с первого кадра.
Вот такое решение нашел. Дублирование... :(

Можно ли как то по другому?
Спасибо!

Answer 1

[Денис Инешин]

Дублирование - самый простой способ, в лоб. Для небольших галерей он прекрасно работает.

Другой вариант, переставлять кадры, например так:
1. Листаем на 1 кадр вправо
2. Листание завершено.
3. Измеряем ширину кадра 1
4. Переставляем кадр 1 в конец
5. Добавляем всей ленте сдвиг на ширину передвинутого 1 кадра

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

Comments

[Вячеслав Лебедев]

Такое решение (если я правильно Вас понял) затребует не хилого перерендера и фпс упадет на 5 шаге :( как идея, не плохо, спасибо :)

[Денис Инешин]

Вячеслав Лебедев: ну почему же упадет, я такое решение делал на позапрошлой работе, и все было хорошо. Тут главное победить все подводные камни и следить за оптимизацией. Можно картинки и не по одной переставлять, а по 2-3 за раз.

[Денис Инешин]

Вячеслав Лебедев: +requestAnimationFrame вам в помощь

[Денис Инешин]

Вячеслав Лебедев: всей ленте это значит внешнему контейнеру, а не каждой отдельной фотке.

[Вячеслав Лебедев]

Анимация на css, разве нужен в таком случае requestAnimationFrame? мне казалось, что с css браузер сам распоряжается, когда ему лучше все перерисовывать

[copal]

Вячеслав Лебедев: я фиг его знает почему мои коменты удалили, но я думаю раз Вы так эмоционально отреагировали, то значит суть их помните. А вот минимальная иллюстрация jsbin.com/rubafacize/edit?js,output . Если Вы ещё не сделали и понимаете как работает ЭТО, то могу продолжить.

[copal]

вот ссылка

[copal]

блин, я не знаю почему он от sass обратно в css не включает... Сами переставьте компилятор..

Answer 2

[Vitaliy]

При достижении последнего слайда удалить первый слайд с начала списка и добавить его в конец. То же самое при показе первого: последний переместить на 1 место