Glide: Slide same number of "perView" slides

Created on 30 Nov 2018  路  3Comments  路  Source: glidejs/glide

As of https://github.com/glidejs/glide/issues/9, it's possible to set multiple slides per view. Unfortunately, it doesn't seem possible to tell Glide to slide back/forth by the same amount of slides set by perView.

What could a possible solution be?

This backs up: https://github.com/glidejs/glide/issues/201

Most helpful comment

you can try this


var glider = new Glide('#parent', {
    type: 'slider',
    perTouch: 1, // must set this to 1
    perView: 4
});

// count the total slide
// I was using jQuery too in the project, so I use it to count the total items
var items = $('#parent').find('.slide');

// hack into the run.before event
glider.on('run.before', function(direction) {
    var pv = glider.settings.perView,
        idx = glider.index;

    if ( glider.enable && pv > 1 ) {
        if ( direction.direction === '>') {
            var nextindex = idx+(pv-1);

            if ( nextindex >= (items.length-pv) ) {
                if ( nextindex === items.length-1 ) {
                    nextindex = -1;
                } else {
                    nextindex = items.length-(pv+1);
                }
            }

            glider.index = nextindex;
        } else {
            var previndex = idx-(pv-1);

            if ( idx < pv && idx > 0 ) {
                previndex = 1;
            } else if ( idx === 0 ) {
                previndex = items.length-(pv-1);
            }

            glider.index = previndex;
        }
    }
});

work good for me :)

All 3 comments

you can try this


var glider = new Glide('#parent', {
    type: 'slider',
    perTouch: 1, // must set this to 1
    perView: 4
});

// count the total slide
// I was using jQuery too in the project, so I use it to count the total items
var items = $('#parent').find('.slide');

// hack into the run.before event
glider.on('run.before', function(direction) {
    var pv = glider.settings.perView,
        idx = glider.index;

    if ( glider.enable && pv > 1 ) {
        if ( direction.direction === '>') {
            var nextindex = idx+(pv-1);

            if ( nextindex >= (items.length-pv) ) {
                if ( nextindex === items.length-1 ) {
                    nextindex = -1;
                } else {
                    nextindex = items.length-(pv+1);
                }
            }

            glider.index = nextindex;
        } else {
            var previndex = idx-(pv-1);

            if ( idx < pv && idx > 0 ) {
                previndex = 1;
            } else if ( idx === 0 ) {
                previndex = items.length-(pv-1);
            }

            glider.index = previndex;
        }
    }
});

work good for me :)

Hey, issue #252 is a bit newer than this but has a more active discussion. There you also find more information about the state of implementation.

Thanks @omares, closing here

Was this page helpful?
0 / 5 - 0 ratings

Related issues

garygreen picture garygreen  路  3Comments

Danielvandervelden picture Danielvandervelden  路  4Comments

heliomsolivas picture heliomsolivas  路  8Comments

iaarab picture iaarab  路  4Comments

adambartosiewicz picture adambartosiewicz  路  3Comments