使用Swiper 5模拟3D滚轮的自定义效果

9

我需要用12个项目构建一个轮播，以模拟无限旋转的3D车轮。为了清楚起见，我需要精确地创建这种效果：

https://codepen.io/SitePoint/pen/yXWXaw（在此处找到）

但具有以下新增功能（尤其是在台式机和移动设备上）：

  1. 幻灯片必须逐步滑动，也就是说，幻灯片应在滑动时移动（就像Swiper一样）。
  2. 快速滑动即可滑动许多幻灯片（如Swiper所做的那样 freeScroll）。
  3. 然后，当车轮停止旋转时，它会卡扣到前滑片上（就像Swiper使用freeModeSticky和一样 centeredSlides），它是用户选择的滑片。
  4. 每次幻灯片更改（例如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,

  });

绝对不是正确的方法。

我认为正确的做法是开发一个定制的组队，探索effect（如内置的cubeEffect，coverflowEffect...），模拟方向盘，没有使用loop:true导致的问题。例如，在这里，一个人创建了自己的自定义效果，然后他在effectSwiper 的属性中进行设置：https ://codepen.io/paralleluniv3rse/pen/yGQjMv 

...
effect: "myCustomTransition",
...

如何开发自定义效果，例如我需要的3d滚轮？

javascript  css  carousel  swiper 
— 弗雷德·K
source
我想知道以这种效果作为起点是否是最好的有益方法：swiperjs.com/demos/240-effect-coverflow.html。我很好奇，虽然可以使“过去的幻灯片”在负x轴上移动，但返回到滑块的右侧以重新展示该节目...
— Phlume
1
@Phlume已经尝试使用它coverflowEffect作为起点并“破解”其参数，但这只是一种解决方法，我无法获得第一个Codepen的效果。幻灯片根本不会放在圆形表面上。
— Fred K
抱歉，您能说清楚您想做什么吗？您是否希望在不单击上一个/下一个按钮的情况下旋转旋转木马？
— Mukyuu
1
@Mukyuu更新了问题的详细信息
— Fred K

Answers:

2

我认为这就是您想要的：https : //codepen.io/mukyuu/pen/GRgPYqG。

除了不使用Swiper 5和snap外，它几乎满足了您的条件。

  1. 它随着滑动方向旋转。
  2. 快速滑动时，它应能动量滚动许多幻灯片（就像Swiper一样）。
  3. 然后，当车轮停止旋转时，它会卡在幻灯片上（就像Swiper一样）。
  4. 在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浏览器中测试。

— yu尤
source
3
呃..我从左向右滑动，车轮向左旋转....虽然看起来很酷
— Tschallacka
2
同时，非常感谢您的回答，但它并没有满足很多要求：1）如@Tschallacka所述，它反向旋转。2）幻灯片不跟随滑动，滑动时应滑动滑动（就像Swiper一样）。3）快速滑动即可滑动许多幻灯片（如Swiper一样）。4）然后，当车轮停止旋转时，它会卡在幻灯片上（就像Swiper一样）。5）我需要一个类似事件的回调slideChanged（就像Swiper一样）。由于所有这些原因，我认为Swiper将是一个很好的起点……
— Fred K
注意。我已经修改了反向旋转并增加了一些动力，我将尝试看看Swiperjs可以带来什么。告诉我是否还有任何需要改进的地方。
— Mukyuu
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.