我需要构建一个包含 12 个项目的轮播，模拟无限旋转的 3D 轮子。需要明确的是，我需要精确地创建这种效果：
https://codepen.io/SitePoint/pen/yXWXaw(在这里找到(
但是有了这些添加功能(特别是在桌面和移动设备上(：
幻灯片- 必须按照滑动逐步进行，即幻灯片 应该在滑动时移动(就像滑动器一样(。
- 快速滑动 应该滚动许多带有动量的幻灯片(就像 Swipeper 所做的那样
freeScroll(。 - 然后，当轮子停止旋转时，它会卡入 前滑动(就像 Swipeper 对
freeModeSticky和centeredSlides(，它是从用户中选择的。 - 我需要 每次幻灯片更改时回调(如
slideChanged事件((如 刷卡器(。
出于所有这些原因，我认为Swipeper 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,
});
绝对不是正确的方式。
我认为正确的方法是开发一个自定义的 Swipepereffect(如内置的cubeEffect、coverflowEffect等(来模拟轮子，而不使用导致问题的loop:true。例如，在这里，一个人创建了自己的自定义效果，然后他在Swipeper的effect属性中设置： https://codepen.io/paralleluniv3rse/pen/yGQjMv
...
effect: "myCustomTransition",
...
如何开发像我需要的 3D 轮这样的自定义效果？
我认为这就是你想要的：https://codepen.io/mukyuu/pen/GRgPYqG。
它几乎满足了你的条件，除了它没有使用Swipeper 5和snap。
- 它随着滑动方向旋转。
- 通过快速滑动，它应该滚动许多带有动力的幻灯片(就像 Swipeper 所做的那样(。
然后，当滚轮停止旋转时，它会卡在幻灯片上(就像 Swipeper 所做的那样(。ontouch函数中有一个回调。
.HTML：
<div class="carousel" id="wrapper">
<figure>
<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
</figure>
</div>
S(CSS(：
body {
margin: 0;
font-family: 'Roboto';
font-size: 16px;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
// Carousel configuration parameters
$n: 8;
$item-width: 400px;
$item-separation: 80px;
$viewer-distance: 500px;
// Derived variables
$theta: 2 * 3.141592653589793 / $n;
$apothem: 482.842712474619px;
.carousel {
padding: 20px;
perspective: $viewer-distance;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
> * {
flex: 0 0 auto;
}
figure {
cursor: grab;
margin: 0;
width: $item-width;
transform-style: preserve-3d;
transition: transform 0.5s;
transform-origin: 50% 50% (-$apothem);
img {
width: 100%;
box-sizing: border-box;
padding: 0 $item-separation / 2;
opacity: 0.9;
&:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
transform-origin: 50% 50% (-$apothem);
}
@for $i from 2 through $n {
&:nth-child(#{$i}) {
transform: rotateY(#{($i - 1) * $theta}rad);
}
}
}
}
nav {
display: flex;
justify-content: center;
margin: 20px 0 0;
button {
flex: 0 0 auto;
margin: 0 5px;
cursor: pointer;
color: #333;
background: none;
border: 1px solid;
letter-spacing: 1px;
padding: 5px 10px;
}
}
}
.JS：
var
carousel = document.querySelector('.carousel'),
figure = carousel.querySelector('figure'),
nav = carousel.querySelector('nav'),
numImages = figure.childElementCount,
theta = 2 * Math.PI / numImages,
currImage = 0
;
// add touch detect:
function ontouch(el, callback){
// Modified from http://www.javascriptkit.com/javatutors/touchevents3.shtml
var touchsurface = el,
dir,
swipeType,
startX,
startY,
distX,
distY,
threshold = 150, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 500, // maximum time allowed to travel that distance
elapsedTime,
startTime,
handletouch = callback || function(evt, dir, phase, swipetype, distance){}
touchsurface.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0]
dir = 'none'
swipeType = 'none'
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime() // record time when finger first makes contact with surface
handletouch(e, 'none', 'start', swipeType, 0) // fire callback function with params dir="none", phase="start", swipetype="none" etc
e.preventDefault()
}, false)
touchsurface.addEventListener('touchmove', function(e){
var touchobj = e.changedTouches[0]
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
if (Math.abs(distX) > Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
dir = (distX < 0)? 'left' : 'right'
handletouch(e, dir, 'move', swipeType, distX) // fire callback function with params dir="left|right", phase="move", swipetype="none" etc
}
else{ // else consider this a vertical movement
dir = (distY < 0)? 'up' : 'down'
handletouch(e, dir, 'move', swipeType, distY) // fire callback function with params dir="up|down", phase="move", swipetype="none" etc
}
e.preventDefault() // prevent scrolling when inside DIV
}, false)
touchsurface.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0]
elapsedTime = new Date().getTime() - startTime // get time elapsed
if (elapsedTime <= allowedTime){ // first condition for awipe met
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
swipeType = dir // set swipeType to either "left" or "right"
}
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
swipeType = dir // set swipeType to either "top" or "down"
}
}
// Fire callback function with params dir="left|right|up|down", phase="end", swipetype=dir etc:
handletouch(e, dir, 'end', swipeType, (dir =='left' || dir =='right')? distX : distY)
e.preventDefault()
}, false)
}
function DoSomething(dir, distance) {
//modifiy this function for wheel rotation (prev/next) images
var momentum = 100; // modify this value for how much momentum expected to switch to next/prev images
switch (dir){
case 'left':
case 'right':
currImage+= Math.round(distance/momentum);
break;
}
figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}
document.getElementById('wrapper').ondragstart = function() { return false; }; // prevent image dragged on mouse drag
window.addEventListener('load', function() {
var dir, phase, el = document.getElementById('wrapper'),
position = {
X: 0,
Y: 0
};
el.onmousedown = function(down) {
position.X = down.clientX;
position.Y = down.clientY;
};
el.onmouseup = function(up) {
distX = up.clientX - position.X; // get horizontal dist traveled by finger while in contact with surface
distY = position.Y - up.clientY; // get vertical dist traveled by finger while in contact with surface
if (Math.abs(distX) > Math.abs(distY)) { // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
dir = (distX < 0) ? 'left' : 'right';
distance = distX;
} else { // else consider this a vertical movement
dir = (distY < 0) ? 'down' : 'up';
distance = distY;
}
dir = (distance == 0) ? 'none' : dir;
DoSomething(dir, distance); // simulate touch from mouse control
};
ontouch(el, function(evt, dir, phase, swipetype, distance){
// evt: contains original Event object
// dir: contains "none", "left", "right", "top", or "down"
// phase: contains "start", "move", or "end"
// swipetype: contains "none", "left", "right", "top", or "down"
// distance: distance traveled either horizontally or vertically, depending on dir value
if ( phase == 'end' && (dir =='left' || dir == 'right') ) // on succesful swipe
DoSomething(dir, distance);
})
}, false)
在 Android 9 和 Windows 10 浏览器中进行测试。