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 notifications@github.com 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 notifications@github.com 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 notifications@github.com 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?

[prod1992]

When width is variable + infinite option is enabled. When there are about 3-4 slides, near the edges slider blinks when you change slides.

On Saturday, 9 January 2016, Ken Wheeler notifications@github.com wrote:

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

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

Best wishes and have a nice day!

Levon Grigoryan.

[kenwheeler]

Well aware, but I'm trying to figure out how to fix this issue, but not create issues for other modes/settings

[prod1992]

Ken, I think its more about infinite option, but variable width.

On Saturday, 9 January 2016, Levon Grigoryan levon1.grigoryan@gmail.com wrote:

When width is variable + infinite option is enabled. When there are about 3-4 slides, near the edges slider blinks when you change slides.

On Saturday, 9 January 2016, Ken Wheeler <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

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

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

Best wishes and have a nice day!

Levon Grigoryan.

Best wishes and have a nice day!

Levon Grigoryan.

[dieterdeduytschaever]

+1

[petruseugene]

+1

[ghost]

+1

[localpcguy]

We actually just removed Slick in a project for a different carousel partially because of this issue. It would go a long way towards us considering it again for future projects. Are you taking PRs for this issue, or is someone already working on it?

[prod1992]

+1

On Wed, Feb 3, 2016 at 8:10 PM, Mike Behnke notifications@github.com wrote:

We actually just removed Slick in a project for a different carousel partially because of this issue. It would go a long way towards us considering it again for future projects. Are you taking PRs for this issue, or is someone already working on it?

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

Best wishes and have a nice day!

Levon Grigoryan.

[kenwheeler]

@localpcguy if you have any ideas, i'm all ears.

[rorykoehler]

@kenwheeler an option of how many slides to clone ahead while on infinite might work well?

[prod1992]

I think yes. try to make twice more clones...

On Thu, Feb 4, 2016 at 4:39 PM, Rory Koehler notifications@github.com wrote:

@kenwheeler https://github.com/kenwheeler an option of how many slides to clone ahead while on infinite might work well?

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

Best wishes and have a nice day!

Levon Grigoryan.

[prod1992]

this is dirty, but have no any idea.

On Thu, Feb 4, 2016 at 4:40 PM, Levon Grigoryan levon1.grigoryan@gmail.com wrote:

I think yes. try to make twice more clones...

On Thu, Feb 4, 2016 at 4:39 PM, Rory Koehler notifications@github.com wrote:

@kenwheeler https://github.com/kenwheeler an option of how many slides to clone ahead while on infinite might work well?

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

Best wishes and have a nice day!

Levon Grigoryan.

Best wishes and have a nice day!

Levon Grigoryan.

[ghost]

Is there at least a solution for using infinite: false?

[Carlospineiro]

Hi!

Although i know it's not a good practice, i've made a little change in the core that it's working for me. In slick.js, line 1131, i've added after "targetLeft = targetSlide[0] ? targetSlide[0].offsetLeft * -1 : 0;" the next piece of code:

if(.$slideTrack.children('.slick-slide').eq(.slideCount - 1).hasClass("slick-active")){ targetSlide = .$slideTrack.children('.slick-slide').eq(.slideCount - 1); targetLeft = $(targetSlide[0]).closest(".slick-slider").width() - (targetSlide[0].offsetLeft + targetSlide[0].offsetWidth); }

My options: centerMode: false, infinite: false

I'm sure there has to be a better way to solve that, meanwhile it could help someone

[v3nt]

+1

[ghost]

@Carlospineiro if you have more than one item visible but slidesToShow set to 1 this will first slide the last item to the left then snap it to the right.

[ramdgupta]

FOR WHITE SPACE IN CASE YOU DEFINE A SLIDE TO SLIDE WITH CASE OF INFINITE FALSE DO NEED DO SOMETHING LIKE THA IN SLICK.JS CODE ADD THIS LINE IN PLACE positionOffset=0; IT'S BEST SOLUTION FOR THE SLDIE

if (.options.infinite === false) { if ((.currentSlide === 0 && swipeDirection === 'right') || (.currentSlide >= .getDotCount() && swipeDirection === 'left')) { swipeLength = .touchObject.swipeLength * .options.edgeFriction; _.touchObject.edgeHit = true; positionOffset=0; } }

[jBernz]

Just started with slick for a project this week. I need to display cutoff slides so I'm using variableWidth: true and infinite: false. However the slider not sticking on the right (and displaying whitespace) is a major problem and I'll have to scrap slick if I can't figure it out.

[ghost]

+1

[BenevidesLecontes]

+1