I use Slick in my project and I need to center two slides. Unfortunately centerMode option works only with odd numbered slidesToShow counts. I tried to center active slides by CSS but without effects.

Do you know any solution? Thank you in advance!

Edit:

Example of my carousel: /.

I want to have 1 centered item on the smallers screens, next 2, 3 etc. Not active slides have less opacity.

I use Slick in my project and I need to center two slides. Unfortunately centerMode option works only with odd numbered slidesToShow counts. I tried to center active slides by CSS but without effects.

Do you know any solution? Thank you in advance!

Edit:

Example of my carousel: https://jsfiddle/lukaszflorczak/y7t64oqs/.

I want to have 1 centered item on the smallers screens, next 2, 3 etc. Not active slides have less opacity.

• javascript
• css
• carousel
• slick.js

• I don't think slick carousel is designed to center 2 slides. Its either you find another carousel that offers what you want to do or make your own carousel. – user3771102 Commented Feb 6, 2017 at 9:05
• I know Slick doesn't have this option by default. The problem is I use Slick now in few other place in the project and I would like to do all carousels with one plugin. From one of Slick contributors I have info: „there's a way to determine the center two active slides with both css and js” but without details. So I hope someone here knows a solution :) – Łukasz Florczak Commented Feb 6, 2017 at 9:17
• Please post a working sample of your code you have made so far so that we can find a way to solve your problem. – user3771102 Commented Feb 6, 2017 at 9:57
• I added an example in the main post. – Łukasz Florczak Commented Feb 6, 2017 at 10:40

3 Answers 3

Slick Carousel center Mode with two slides is possible using variableWidth, you have to set width for each slide. After that you have to move slick-track half width of the slick slide.

Working fiddle here: Slick slide - two slides in center mode

Slick Carousel slides can be centered by setting the horizontal margins of .slick-track to auto in addition to using the centerMode attribute.

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

You can use the INIT Event to add a css class if there are less items than "slidesToShow".

let slider = $('.reference-slider');

let slidesToShow = 3;

slider.on('init',function(event, slick, currentSlide){

    if (slick.$slides.length < slidesToShow) {
        $(this).find('.slick-track').addClass('slick-track-less-than-slidesToShow');
    }

});

slider.slick({
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    dots: false,
    centerMode: true,
    centerPadding: '0px',
    lazyLoad: 'ondemand',
});

Than add Style to the slick-track element:

   .slick-track.slick-track-less-than-slidesToShow {
       margin-left: 0;
   }