Center mode problem when there are few slides

[sdornan]

I am using slick in center mode to create a carousel where the user can make a selection by moving their desired choice to the center spot.

It works as expected when I have many items:

However, with fewer slides than the number of items to display, it doesn't quite work as I would expect:

I would expect the user to be able to move an item to the center spot, even if there are less slides than the number set to display. In addition, in the three slide case, there seem to be two slides that have the center-slide class assigned to them, neither of them in the center spot, which doesn't make sense to me.

Is this working as intended or a bug(s)?

[kenwheeler]

Can you post a fiddle of your settings?

[sdornan]

I did you one better and made a plunker out of the relevant part of my app:

http://plnkr.co/edit/viEzSB3g3fvDSeF9LR1p?p=preview

I am using angular, so I have a super simple directive that wraps around slick.

[kenwheeler]

Ah, a gentleman and a scholar. I see whats going on here, I'll put in some logic in the next dot release to correct the center class on < slidesToShow setups.

[wiiiiilllllll]

Sorry to nag, but is there any news on this? I've come up against this problem too, I'm having limited success trying to hack it :)

[kenwheeler]

In progress

[wmaca]

Hi, Ken.

Any ideia when this bug will be fixed?

Thanks by way, good plugin.

[kenwheeler]

Ok. so here is what is happening. i have the carousel set up to not be active if there aren't as many slides as there are slidesToScroll. So if your count is below that, it will remove controls and just look like the items were sitting there, because you can't actually scroll to anything. If you go into your slick and remove the part that hide it, (if(slideCount < slidesToShow)), it won't do this.

[kenwheeler]

Moving forward I'd like to make this an option rather than an opinionated decision.

[wmaca]

Thanks, Ken. I had to comment out some places _.slideCount > _.options.slidesToShow and _.slideCount <= _.options.slidesToShow. Everything seems just fine:

https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L537
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L545
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L375
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L761
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L849
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1350

Thanks for your help and for slick.

[jullermss]

Could you tell me which lines you comment from slick.js? I have the same problem

[wmaca]

@jullermss, I am no longer using slick.js, it became unecessary for our needs. As code have changed the lines I mentionend are no longer the same. I suggest you looking for the expressions I mentioned.

[blaiz]

Has this issue been fixed?

I'm looking at the current code at https://github.com/kenwheeler/slick/blob/master/slick/slick.js but it looks like the issue is still here. I tested this version in a jsfiddle and I could still reproduce it. In this jsfiddle, clicking on the arrows does nothing when there are 3 panels, but works properly when there are 4 panels (you need to manually add a panel to test this).

I'm currently having the issue on a project I'm working on. We want center mode to work the same way no matter how many slides we have, be it 2 or 200. We're using slick.js version 1.3.15 and I can get around it by patching slick.js like @waltermacambira did: https://gist.github.com/blaiz/c6f01b3d9127c386aa99/revisions

If I understand the logic correctly, when the number of slides is less than or equal to the slidesToShow setting, slick.js basically doesn't use the regular center-mode but instead just shows all slides at once. It seems like it shouldn't be difficult to add a new setting to disable this behavior. I could fork the repo and give it a try. What do you think?

[okstaticzero]

I'm having the same issue. Any updates?

[yenkute]

I've the same issue. With a few item, slider don't center.

[crispwake]

I just came up with a quick solution to suit my needs.

In the Slick.prototype.initUI function, add the following:

    if( _.slideCount < _.options.slidesToShow ) {
        _.$slider.addClass('slick-no-slide');
    }
    else {
        _.$slider.removeClass('slick-no-slide');
    }

This adds a .slick-no-slide class to the slick carousel if there are less slides than the slidesToShow option. It will remove the class if this changes (ie breakpoint settings change).

Then add the following CSS which will then override the width setting of .slick-track (it will be set to the width of the number of slides otherwise), switch the slides to display inline-block and not float, and center them. This works for my scenario but you may need to alter the CSS to suit your needs.

.slick-no-slide .slick-track {
    width: 100% !important;
    text-align: center;
}

.slick-no-slide .slick-slide {
    float: none;
    display: inline-block;
}

I think the good thing with this solution is it's CSS based, so it should be easily tailored to fit whatever the end case is rather than having JavaScript make assumptions for you.

I'm happy to create a PR with this if you'd like, just let me know.

[stha]

👍 +1

[chinhphan099]

Up :)

[userlond]

Have the same issue.

[davidnoh]

@kenwheeler Are there some news? You wrote, that you're thinking about making it an option. That would be really nice. Furthermore it would be nice to have the option for centerMode, if length > 1 -> show arrows to center the active item. Thanks for your work.

[ghost]

+1, we are really struggling with this, in many projects. We need a fix

[ghost]

I fixed (read: hacked) it by using the following code:

function Gallery__set_current() {
    slick = $('.Gallery__navigation ul').slick('getSlick');
    var slideCount = slick.slideCount;
    var slidesToShow = slick.options.slidesToShow;

    if(slideCount <= slidesToShow) {
        $('.Gallery__navigation ul .slick-slide').removeClass('slick-current')
            .eq(Gallery__current().data('slick-index')).addClass('slick-current');
    }
}

Gallery_set_current is called on slick's event afterChange

if the slideCount is less than or equal to the amount of slidesToShow, it will manually set the slick-current class.

Gallery__current().data('slick-index') <- This bit of code gets the data-slick-index from the main slick slider slide with the slick-current class.

[chinhphan099]

Optimized from @rcrisp

function checkSlickNoSlide() {
  var elm = $('.slick-nav'),
      getSlick = elm.slick('getSlick');

  if(getSlick.slideCount <= getSlick.options.slidesToShow) {
    elm.addClass('slick-no-slide');
  }
  else {
    elm.removeClass('slick-no-slide');
  }
}

checkSlickNoSlide is called on slick's event afterChange

CSS:

.slick-no-slide .slick-track {
    width: 100% !important;
    text-align: center;
    transform: inherit !important;
}
.slick-no-slide .slick-slide {
    float: none;
    display: inline-block;
}

[hoomersinpsom]

Up o/

[SharpEdgeMarshall]

+1

[rttmax]

+1

[ixisio]

@kenwheeler Any updates here?

[hoomersinpsom]

almost 2 years and nobody fixed this ?

[kenwheeler]

Is there a related stable PR somewhere?

[hoomersinpsom]

i've found this #1901

[CheezeCoder]

I'm not quite sure I have the same issue as you guys, but I found another alternative if this is indeed a part of someone's troubles.

My issue is that I am using slick on a wordpress site and the number of slides is dynamic according to however many images the user adds to a wordpress ACF field. So a slider on one page may have 8 slides or may have 2 slides.

So to solve this I just query the amount of children of my slick slider:

var numSlides = $('my-slider').children().length

And then I create a conditional based upon how many slides I want to show so in my case I want there to always be 3 slides showing using center mode. To make this work I write:

numSlides > 3 ? slides = 3 : slides--;

Then I can use this to init my slider:

$('my-slider).slick({
    slidesToShow: numSlides,
    cetnerMode: true    
})

Note this is only if you want to have infinite sliding. In the case where there is 2 slides the above example will show a duplicate slide where the center is unique and the 2 slides to the left and right are the same.

It's a pretty specific use case but it might help someone.
Cheers

EDIT: Just realized that this messes up the positioning as the extra cloned slide takes on the .slick-center class as well. If I target .slick-current.slick-center only for transitions it breaks the final slide animation as discussed 1720. I wish I could target .slick-center in combination with another class without breaking the final or first slide in an infinite setting. Its very frustrating.

[hadnazzar]

Here is my solution same of some before.

Add some if statements in Slick.prototype.initUI = function () {

if (_.slideCount <= _.options.slidesToShow) {
            _.$slider.addClass('slick-no-slide');
        }
        else {
            _.$slider.removeClass('slick-no-slide');
        }

If you want to show more elements than you have slider will have no-slide class.

Then add your css file.

.slick-no-slide .slick-track {
    width: 100% !important ;
    text-align: center !important;
    transform: inherit !important;
}
.slick-no-slide .slick-slide {
    float: none !important;
    display: inline-block !important;
}

[squirec-dev]

Similar kind of issue. It also appears to be adding "slick-center" to two slides at the same time. I want to highlight the central nav slide.
Fiddle here: https://jsfiddle.net/SparrowWoods/nu3psa1g/

ok turns out we were using v1.5. With v1.6 i can css target slide using .slick-current!

[alexmpereira]

@hadnazzar Thanks, here solved my problem.

[jikkujose]

So no real solution for this?

[Pushplaybang]

doesn't seem that way.

[viovelros]

@yenkute

Please try to add "margin: auto" like this picture.

[fparent]

Any news on this? When using centerMode: true with the number slides <= than the attribute slidesToShow, the "slick-center" class is still being applied to every slides except the center one.

To test I've created a slider with 3 slides and here are the classnames applied:

• left slide: "slick-slide slick-current slick-center"
• center slide: "slick-slide"
• right slide: "slick-slide slick-center"

For now I'm have removing the "slick-center" class on each element after the plugin is initialized but it feels a bit... hacky :/

Thanks, keep up the good job!

[jikkujose]

@fparent you mean to say that the removing the slick-center class gets the job done?

[fparent]

in my case yes because I'm using the class mainly for styling purpose

[gustavokrause]

Adds a custom CSS:

.slick-track {
    margin-left: 0;
    margin-right: 0;
}

[lukoie]

I had the same problem, and I've found out that the problem is in the #id's
So I've reassigned every slide to the class instead of id, and everythyng works fine now.

[Elurajnagare]

Here is my solution same of some before.

Add some if statements in Slick.prototype.initUI = function () {

if (_.slideCount <= _.options.slidesToShow) {
            _.$slider.addClass('slick-no-slide');
        }
        else {
            _.$slider.removeClass('slick-no-slide');
        }

If you want to show more elements than you have slider will have no-slide class.

Then add your css file.

.slick-no-slide .slick-track {
    width: 100% !important ;
    text-align: center !important;
    transform: inherit !important;
}
.slick-no-slide .slick-slide {
    float: none !important;
    display: inline-block !important;
}

Nice it's works

[JrZavaschi]

I just came up with a quick solution to suit my needs.

In the Slick.prototype.initUI function, add the following:

    if( _.slideCount < _.options.slidesToShow ) {
        _.$slider.addClass('slick-no-slide');
    }
    else {
        _.$slider.removeClass('slick-no-slide');
    }

This adds a .slick-no-slide class to the slick carousel if there are less slides than the slidesToShow option. It will remove the class if this changes (ie breakpoint settings change).

Then add the following CSS which will then override the width setting of .slick-track (it will be set to the width of the number of slides otherwise), switch the slides to display inline-block and not float, and center them. This works for my scenario but you may need to alter the CSS to suit your needs.

.slick-no-slide .slick-track {
    width: 100% !important;
    text-align: center;
}

.slick-no-slide .slick-slide {
    float: none;
    display: inline-block;
}

I think the good thing with this solution is it's CSS based, so it should be easily tailored to fit whatever the end case is rather than having JavaScript make assumptions for you.

I'm happy to create a PR with this if you'd like, just let me know.

Thanks man :)