Javascript jQuery滑块-将最近的滑块移动到边

好的，所以我想使用“自由模式”，因为这给了我滑动时想要的效果。一切都是我想要的（幻灯片的大小和数量），但我希望它做的一件事是在滑块停止后（用户将其滑动到一侧后），滑块将与3个幻灯片对齐以适合容器（非常类似于“旋转模式”）

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

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

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

我已经尝试了很多方法，但都不能成功。我尝试过的大部分内容都是在使用API设置的网站内（链接在顶部）进行的。我发布所有我尝试过的内容没有多大意义，因为我可能错过了一些东西等等

当前设置：

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

这是我到目前为止的演示。在这方面的任何帮助都将是巨大的，我甚至愿意给任何能解决这个问题的人一点额外的代表（我已经尝试了一段时间），所以+50代表给任何能解决这个问题的人

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

---

注意：我将在iPad上使用此功能，只要一个小提示就可以让某人想出一些不兼容的东西。

我不想这么说，但似乎免费模式是阻止你的原因。甚至不能在使用onSlideChangeEnd回调函数时调用它。如果您足够聪明，我想您可以利用onTouchMove回调函数激活某种自定义侦听器，该侦听器可以告诉包装器何时停止，它可以根据320*滑块索引确定捕捉位置，滑块的左边缘最接近屏幕的左边缘

也就是说，祝你好运

解决方案0 这个解决方案增加了一个新的解决方案。这也可以处理不发生刷卡的情况。例如，用户单击、拖动和释放，但不会发生转换

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;
    }
});

var mouseClick=false；
var mySwiper=new Swiper（“.Swiper container”{
幻灯片视图：3，
动量比：1，
自由模式：对，
freeModeFluid：是的，
onTouchEnd:函数（）{
mouseClick=true；
$（'.swiper wrapper'）.toggleClass（'transition'）；
},
})
$（“.swiper wrapper”）.bind（“transitionend WebKittTransitionEnd oTransitionEnd MSTransitionEnd”，函数（）{
如果（鼠标单击）{
if（数学abs（mysweer.positions.current）%320.0<160）{
myswirep.swipePrev（）；
}否则{
mySwiper.swipeNext（）；
}
mouseClick=false；
}
});

编辑：
工作示例：

解决方案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);
    },
})

var mySwiper=new Swiper（“.Swiper container”{
幻灯片视图：3，
动量比：1，
queueEndCallbacks:true，
自由模式：对，
freeModeFluid：是的，
onTouchEnd:函数（）{
setTimeout（函数（）{
if（数学abs（mysweer.positions.current）%320<160）{
myswirep.swipePrev（）；
}否则{
mySwiper.swipeNext（）；
}
console.log（Math.abs（mysweer.positions.current）%320）；
}, 500);
},
})

---

工作示例：

您也可以这样做，只需使用如下条件移动下一张幻灯片或上一张幻灯片即可

 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;
    }
}

---

这是您向解决此问题的任何人更新的

so+50代表。哈哈，行贿哈哈，我现在还不能悬赏，我知道没有人会白费力气。嗯，问题是我需要自由模式，因为滑块完全按照我的要求来做（从动作上看）。我对jQuery不太在行，所以你能在几天前给我机会吗？我想这可能是不可能的，因为我们不能用那个电话。我需要它，这样滑块停止，然后移动到正确的位置的3面。对不起，我没有足够的悟性来鞭策像这样的东西。这就像看着一个穴居人试图使用自动售货机；他最终会得到一份零食，但不会很好吃。也许是一个监听器在onTouchMove回调后每隔一秒钟检查一次包装器的x是否仍在更改，直到停止？代码大师？有人认为这会起作用吗？这很好，只是最近的边缘失效了，如果我拉动它，比如说90%的元素，它仍然会滑动out@Mr.Alien我希望为最近的边缘问题找到一个简单的解决方案。我想这可以通过总元素

width

滚动位置和窗口宽度来解决，这些因素可以为你的努力起到推举的作用，虽然这在某种程度上起到了作用，但真正的乐趣是当我们把边缘划到最近的位置时corner@Ruddy很高兴我能帮忙。外星人先生，谢谢你的赏金。干得好。但是，此解决方案不处理用户单击并拖动列而不是滑动列的用例。由于没有过渡，因此不会对最近的边进行最终调整。另外，

onSlideChangeEnd

不适用于

freemode

。