Мне нужно построить карусель из 12 предметов, которые имитируют бесконечное вращение 3-го колеса. Чтобы было понятно, мне нужно создать именно этот эффект:
https://codepen.io/SitePoint/pen/yXWXaw (находится здесь )
но с этими функциями добавления (особенно для настольных компьютеров и мобильных устройств):
- Слайды должны следовать шаг за шагом, то есть слайды должны двигаться во время смахивания (как Swiper делает).
- Быстро проведя, он должен прокрутить много слайдов с импульсом (как Swiper делает с
freeScroll
). - Затем, когда колесо перестает вращаться, оно защелкивается на переднюю направляющую (как это делает Swiper
freeModeSticky
иcenteredSlides
), что оно выбрано пользователем. - Мне нужен обратный вызов каждый раз, когда меняется слайд (например, событие
slideChanged
) (как это делает Swiper).
По всем этим причинам я думал, что Swiper 5.3.0 будет хорошей отправной точкой.
Я пробовал различные обходные пути, лучше с этой настройкой, но loop: true
это ужасный обходной путь и вызывает проблемы (проверьте комментарии):
var swiper = new Swiper(el_class, {
slidesPerView: 1.5,
spaceBetween: 25,
centeredSlides: true,
grabCursor: true,
speed: 550,
loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a while before render the next cycle. Awful
loopAdditionalSlides: 10,
// Free mode
freeMode: true, // <== free scrolling. Good
freeModeMomentumRatio: 1,
freeModeMomentumVelocityRatio: 1.5,
freeModeMomentumBounceRatio: 1,
freeModeMinimumVelocity: 0.02,
freeModeSticky: true, // <== snap to the slides. Good
// Touch Resistance
resistanceRatio: 0.85,
// Prevent blurry texts
roundLengths: true,
});
Определенно не правильный путь.
Я думаю, что правильный путь заключается в разработке собственного Swiper effect
(например, встроенного cubeEffect
, coverflowEffect
...), который имитирует колесо, без использования, loop:true
что вызывает проблемы. Например, здесь парень создает свой собственный пользовательский эффект, который затем он устанавливает в effect
атрибуте Swiper:
https://codepen.io/paralleluniv3rse/pen/yGQjMv
...
effect: "myCustomTransition",
...
Как разработать собственный эффект, например, нужное мне колесо 3d?
источник
coverflowEffect
качестве отправной точки и «взламывать» его параметры, но это всего лишь обходной путь, и я не могу получить эффект от первого кода ручки. Слайды просто не будут размещены на круглой поверхности.Ответы:
Я думаю, что это то, что вы хотите: https://codepen.io/mukyuu/pen/GRgPYqG .
Он почти выполнил ваши условия, за исключением того, что он не использует Swiper 5 и Snap.
Затем, когда колесо перестает вращаться, оно скользит по слайду (как это делает Swiper).ontouch
функции есть обратный вызов.HTML:
S (CSS):
JS:
Протестировано в браузерах Android 9 и Windows 10.
источник
slideChanged
(как делает Swiper). По всем этим причинам я думал, что Swiper будет хорошей отправной точкой ...