Geek asks and answers

JQuery Slider - move the closest slide to the edge

Okay, so this slider I would like to use the "free mode", as this gives the effect I would like it when you slide. All I want (the size and number of slides), but the only thing I would like to do is after the slider has stopped (after the user has moved it to the side) the slider will align with the three slides to fit the container (same as "carousel mode").

To explain a little better, I have this image:

So, above we have the math after the slide. And down below is what it should look like. Thus, the slider lands on 4 slides, the slider should now move slightly to the side, so that slide 2 touches the left side, and slide 4 is displayed completely. image

I tried a few things, but can't get it to work. Most of what I tried is inside the site (linked at the top) using API settings, etc. Not so many that I sent all the ones I tried, as I might have missed, etc.

Current Settings:

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

Here is a demonstration of what I still have. Any help on this would be great, and I would even like to give a little extra cue to anyone who can solve it (I tried for a while), so a +50 reputation for anyone who solves this.

DEMO HERE

, , "" , . , 3 .

: iPad, , - - .

+3
3

0

CSS. , . , , , .

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/

+3

, , 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

+2

I don’t want to say, but it seems that free mode is what stops you. You cannot even call the onSlideChangeEnd callback function when using it. If you were smart enough, I suppose you could use the onTouchMove callback function to activate a custom listener that can determine when the shell comes to its senses and at what point it can determine the binding based on the 320 * left slider index the edge closest to the left edge of the screen.

Say good luck!

0
source

More articles:


All Articles