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

Question

好的 this slider我想使用“自由模式”，因为这会在滑动时产生我想要的效果。一切都是我想要的(幻灯片的大小和数量)，但我希望它做的一件事是在 slider 停止后(在用户将其滑到一边后) slider 将与 3 张幻灯片对齐以适合容器(很像“轮播模式”)。

为了更好地解释我有这张图片:

所以在顶部我们有幻灯片的计算结果。底部是它应该的样子。所以 slider 落在 4 张幻灯片上， slider 现在应该稍微向一侧移动，这样幻灯片 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/

方案一

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

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/