jQuery Slider - 将最近的幻灯片移动到边缘

Question

好的this slider我想使用“自由模式”，因为这样可以提供滑动时的效果。一切都是我想要的（尺寸和幻灯片的数量），但我想要做的一件事是在滑块停止后（用户将其滑到一侧后）滑块将与3个幻灯片对齐以适应容器（很像“旋转木马模式”）。

为了更好地解释一下，我有这张图片：

所以在顶部我们有幻灯片的后数学。在底部是它应该是什么样子。因此滑块落在4个滑块上，滑块现在应稍微向侧面移动，因此滑块2接触左侧，滑块4完成显示。

我尝试了很多东西，但却无法实现这一点。我尝试过的大部分内容都是在网站内部（在顶部链接）使用API​​设置等。我没有多少发布我尝试的所有内容，因为我可能错过了等等。

当前设置：

slidesPerView: 3,
momentumRatio: 1,
freeMode: true,
freeModeFluid: true,

这是我到目前为止的演示。任何有关这方面的帮助都会很棒，我甚至愿意给那些可以解决这个问题的人多加一点代表（我已经尝试了一段时间），所以+50代表解决这个问题的人。

DEMO HERE

为了确保我们都在同一页面上，它应该只在移动完成后“锁定”到幻灯片上。它必须停止然后移动以适应容器中的3个幻灯片。

注意：我会在iPad上使用它，只需要一点注意事项，就会有人想出一些不兼容的东西。

Answer 1

解决方案0

此解决方案添加了callback to when the CSS transitions finishes。这也处理没有滑动的情况。例如，用户点击，拖动和释放，但不会发生转换。

<强> CSS

.swiper-wrapper {
    transition:all 1s ease;
    -webkit-transition:all 1s ease;
}
.transition {
    background:white;
}

<强>的JavaScript

var mouseClick = false;
var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    momentumRatio: 1,
    freeMode: true,
    freeModeFluid: true,
    onTouchEnd: function () {
        mouseClick = true;
        $('.swiper-wrapper').toggleClass('transition');
    },
})

$(".swiper-wrapper").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
    if (mouseClick) {
        if (Math.abs(mySwiper.positions.current) % 320.0 < 160) {
            mySwiper.swipePrev();
        } else {
            mySwiper.swipeNext();
        }
        mouseClick = false;
    }
});

要修改：http://jsfiddle.net/Xuz4z/15/
工作示例：http://jsfiddle.net/Xuz4z/15/embedded/result/

解决方案1 ​​

某个地方开始。此解决方案使用当前位置来确定是向前还是向后滑动。它不能完美地工作，因为有时在滑动完成之前获得该值。

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    momentumRatio: 1,
    queueEndCallbacks: true,
    freeMode: true,
    freeModeFluid: true,
    onTouchEnd: function () {
        setTimeout(function () {
            if (Math.abs(mySwiper.positions.current) % 320 < 160) {
                mySwiper.swipePrev();
            } else {
                mySwiper.swipeNext();
            }
            console.log(Math.abs(mySwiper.positions.current) % 320);
        }, 500);
    },
})

工作示例：http://jsfiddle.net/Xuz4z/12/embedded/result/

Answer 2

您也可以做这样简单的事情，只需使用条件本身移动下一张幻灯片或prevslide

 var forward = true;
var pos = 0;
var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    momentumRatio: 1,
    freeMode: true,
    freeModeFluid: true,
    onSlideChangeEnd: function (dir) {
        console.log(dir.activeIndex);
        if(dir.activeIndex > pos){
            forward = true;        
        }else{
            forward = false;
        }
        pos = dir.activeIndex;
    }
})
var perm = true;
mySwiper.wrapperTransitionEnd(fun1, true);

function fun1() {
    if (perm) {
        if (forward) {
            mySwiper.swipeNext();
        } else {
            mySwiper.swipePrev();
        }

        perm = false;
    } else {
        perm = true;
    }
}

这是您更新的jsfiddle

Answer 3

讨厌说但似乎免费模式正在阻止你。使用它时甚至无法调用onSlideChangeEnd回调函数。如果你足够精明，我想你可以利用onTouchMove回调函数激活某种类型的自定义监听器，它可以告诉包装器什么时候停止，它可以确定基于320 *滑块索引的捕捉位置左边最靠近屏幕的左边缘。

那说，祝你好运！