Variable Width + Infinite

[picard102]

When using variable width there is an amount of white space generated at either end.

When scrolling right as you approach the last slide more and more whitespace opens up until you hit the very last slide, at which point the white space is replaced by previous slides in infinite mode.

Similarly, if you move left through the slider, content disappears and is replaced by white space.

I would think that the expected results would be the white space be occupied by slides as the end comes into view, rather than as the last slide hits the left edge.

http://jsfiddle.net/memvovkz/

[jDavidnet]

+1 to this issue

[marlosirapuan]

+1

[onstuimig]

+1

[midudev]

+1

[nexflo]

+1 Very true...feelsbuggy. This should really be an option/setting.

[mafrost]

+1

[evalunamain]

Don't ask me why, but if it's not interfering with your slider in other ways, consider setting slidesToShow to at least half of your number of slides, which would be 6 for your fiddle. It's a hack, but it solved my problem for now.

http://jsfiddle.net/memvovkz/1/

[picard102]

@evalunamain Interesting. Will have to try and see if this will work with dynamic content as well, where the number of objects is unknown.

[jcitysinner]

@picard102 it appears if you use @evalunamain 's method and just use jQuery to get the number of slides before the slider initializes, you should be able to pass in that number divided by 2. Haven't fully tested by it worked when I changed the JS in the fiddle you shared in the initial post.

[makseo]

Maybe someone can help? What if I need to style an active slide? And if slider has more than 1 in slidesToShow, for example, 6 slides. All of them have an slick-active class, and I am using a centerMode: true, so only one slider in the middle has to be active.

[jcitysinner]

I think I've dealt with that before @makseo , if you use the beforeChange event, you can figure out which slide is the next slide and then apply a style directly to it.

[PixelZombie]

+1

[albertopriore]

+1

[gambala]

+1

[prod1992]

Hey guys.... had the same problem with a carousel of variable width of items....got a solution for this....

Have tried the solution of evalunamain, and set the slidesToShow option to half of my items, but this way slide controls (arrows) didn't work as expected...

So I go to the code of slick core....and found the lines where infinite is being initialized...here is the code down here:

Slick.prototype.setupInfinite = function() {

    var _ = this,
        i, slideIndex, infiniteCount;

    if (_.options.fade === true) {
        _.options.centerMode = false;
    }

    if (_.options.infinite === true && _.options.fade === false) {

        slideIndex = null;

        if (_.slideCount > _.options.slidesToShow) {

            if (_.options.centerMode === true) {
                infiniteCount = _.options.slidesToShow + 1;
            } else {
                infiniteCount = _.options.slidesToShow;
            }

            for (i = _.slideCount; i > (_.slideCount -
                    infiniteCount); i -= 1) {
                slideIndex = i - 1;
                $(_.$slides[slideIndex]).clone(true).attr('id', '')
                    .attr('data-slick-index', slideIndex - _.slideCount)
                    .prependTo(_.$slideTrack).addClass('slick-cloned');

// added this code here $(.$slides[slideIndex + 1]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex - .slideCount) .prependTo(.$slideTrack).addClass('slick-cloned'); $(.$slides[slideIndex + 2]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex - .slideCount) .prependTo(.$slideTrack).addClass('slick-cloned'); // } for (i = 0; i < infiniteCount; i += 1) { slideIndex = i; $(.$slides[slideIndex]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + .slideCount) .appendTo(.$slideTrack).addClass('slick-cloned'); // and this code here $(.$slides[slideIndex + 1]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + .slideCount) .appendTo(.$slideTrack).addClass('slick-cloned'); $(_.$slides[slideIndex + 2]).clone(true).attr('id', '') .attr('data-slick-index', slideIndex + .slideCount) .appendTo(.$slideTrack).addClass('slick-cloned'); // } _.$slideTrack.find('.slick-cloned').find('[id]').each(function() { $(this).attr('id', ''); });

        }

    }

};

so it creates some more clones...... and I suggest to make an option, which can manipulate the number of clones on this position....

Hope this helps....thanks guys.

[gius80]

+1

[rafa-suagu]

+1

[rafa-suagu]

Hi @prod1992 , I tested your solution and didn't work for my case.

Finding the solution I found one trick: use unFilter function when the init event is fired.

Edit: In my case didn't use variableWidth and also fails

[prod1992]

Thanks, can you provide a snippet for better understanding?

On Monday, 21 December 2015, Rafa Aguilar [email protected] wrote:

Hi prod1992, I tested your solution and didn't work for me case.

Finding the solution I found one trick: use unFilter function when the init event is fired.

— Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/1207#issuecomment-166279797.

*Best wishes and have a nice day! *

Levon Grigoryan.

[rafa-suagu]

I use with angular directive https://github.com/devmark/angular-slick-carousel, if you want to check my issue test the demo of this repo.

For solve, only have to click unFilter button.

[chemoish]

+1

[rafa-suagu]

You can see the error in the next screencast: https://www.dropbox.com/s/rte1569yb7z167t/angular-slick.mov?dl=0

[danielfriis]

+1

[HonzaMikula]

+1

[kenwheeler]

I'm off next week so I'll try to get this sorted out folks

[prod1992]

that would be great 👌

On Fri, Dec 25, 2015 at 8:26 AM, Ken Wheeler [email protected] wrote:

I'm off next week so I'll try to get this sorted out folks

— Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/1207#issuecomment-167191108.

*Best wishes and have a nice day! *

Levon Grigoryan.

[danielmuehlbacher]

+1, same problem here.

[kenwheeler]

Are we all in agreement that the last slide should stick to the right edge?

[prod1992]

Yes, I agree with that.

On Saturday, 9 January 2016, Ken Wheeler [email protected] wrote:

Are we all in agreement that the last slide should stick to the right edge?

— Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/1207#issuecomment-170242120.

*Best wishes and have a nice day! *

Levon Grigoryan.

[kenwheeler]

@prod1992 so if its variable width, the last navigable/selectable index should be the one that sticks the last one to the right edge?