jQuery Slider - Move nearest slide to edge

Question

Ok so with this slider I would like to use the "free mode" as this gives the effect I would like when sliding. Everything is how I want it (size & number of slides) but the one thing I would like it to do is after the slider has stopped (after a user slides it to a side) the slider would align with 3 slides to fit the container (much like the "carousel mode").

To explain a little better I have this image:

So at the top we have the after math of a slide. And at the bottom is what it should look like. So the slider lands on 4 slides, the slider should now move slightly to the side so slide 2 is touching the left side and slide 4 is complete showing.

I have tried a fair few things but cannot get this working. Most of what I have tried is within the site (linked at the top) using the API settings etc. Not much point of me posting all the ones I tried as I may have missed things etc.

Current settings:

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

Here is a demo of what I have so far. Any help on this would be great and I would even be willing to give a little extra rep to anyone that can solve this (I have been trying for a while), so +50 rep to anyone that solves this.

DEMO HERE

Just to make sure we are all on the same page, it should only "lock on" to a slide once the movement has finished. It must be stopped and then move to fit 3 slides in the container.

Note: I will be using this on an iPad, just a little note encase someone comes up with something not compatible.

Answer 1

Solution 0

This solution adds a callback to when the CSS transitions finishes. This also handles the situation where no swipe occurs. For instance, the user clicks, drags, and releases but no transition occurs.

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

To Edit: http://jsfiddle.net/Xuz4z/15/
Working Example: http://jsfiddle.net/Xuz4z/15/embedded/result/

Solution 1

Somewhere to start. This solution uses the current position to determine whether to slide forward or back. It doesn't work perfectly because the value is sometimes obtained before the sliding is complete.

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

Working Example: http://jsfiddle.net/Xuz4z/12/embedded/result/

Answer 2

You can also do simple thing like this just move next slide or prevslide using condition itself like this

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

Here is your updated jsfiddle

Answer 3

Hate to say but it seems free mode is what's stopping you. Can't even call an onSlideChangeEnd callback function while using it. If you were savvy enough I suppose you could utilize the onTouchMove callback function to activate a custom listener of some kind that can tell when the wrapper comes to rest at which point it could determine a snap-position based on 320 * the index of the slider with left edge closest to screen's left edge.

That said, best of luck!