Ich muss ein Karussell mit 12 Elementen bauen, die ein unendlich rotierendes 3D-Rad simulieren. Um klar zu sein, muss ich genau diesen Effekt erzeugen:
https://codepen.io/SitePoint/pen/yXWXaw ( hier zu finden )
Aber mit diesen zusätzlichen Funktionen (insbesondere auf dem Desktop und auf Mobilgeräten):
- Folien müssen Schritt für Schritt dem Wischen folgen, dh Folien sollten sich während des Wischens bewegen (wie dies bei Swiper der Fall ist).
- Mit einem schnellen Wischen sollte es viele Folien mit Schwung scrollen (wie es Swiper tut
freeScroll
). - Wenn sich das Rad dann nicht mehr dreht, rastet es am vorderen Schlitten ein (wie Swiper es mit
freeModeSticky
und tutcenteredSlides
), dass es das vom Benutzer ausgewählte ist. - Ich benötige jedes Mal einen Rückruf, wenn sich die Folie ändert (ereignisähnlich
slideChanged
) (wie bei Swiper).
Aus all diesen Gründen dachte ich, Swiper 5.3.0 wäre ein guter Ausgangspunkt.
Ich habe verschiedene Problemumgehungen versucht, die bessere ist mit diesem Setup, aber die loop: true
ist eine schreckliche Problemumgehung und verursacht Probleme (siehe Kommentare):
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,
});
Auf jeden Fall nicht der richtige Weg.
Ich denke , der richtige Weg ist , eine benutzerdefinierte swiper zu entwickeln effect
(wie die eingebauten in cubeEffect
, coverflowEffect
...) , dass das Rad simuliert, ohne loop:true
dass Ursachen Probleme. Hier erstellt beispielsweise ein Typ seinen eigenen benutzerdefinierten Effekt, den er dann im effect
Attribut von Swiper festlegt:
https://codepen.io/paralleluniv3rse/pen/yGQjMv
...
effect: "myCustomTransition",
...
Wie entwickle ich einen benutzerdefinierten Effekt wie das 3D-Rad, das ich brauche?
quelle
coverflowEffect
als Ausgangspunkt zu arbeiten und seine Parameter zu "hacken", aber es ist nur eine Problemumgehung, und ich kann den Effekt des ersten Codepens nicht erzielen. Die Folien werden einfach nicht auf einer kreisförmigen Oberfläche platziert.Antworten:
Ich denke, das ist was Sie wollen: https://codepen.io/mukyuu/pen/GRgPYqG .
Es hat Ihre Bedingungen fast erfüllt, außer dass Swiper 5 und Snap nicht verwendet werden.
Wenn sich das Rad dann nicht mehr dreht, rastet es auf einem Schlitten ein (wie es Swiper tut).ontouch
Funktion gibt es einen Rückruf.HTML:
S (CSS):
JS:
Getestet in Android 9 und Windows 10 Browsern.
quelle
slideChanged
(wie Swiper). Aus all diesen Gründen dachte ich, Swiper wäre ein guter Ausgangspunkt ...