CODEWITHSUNDEEP
javascriptcsscarouselslick.js
Łukasz Florczak
Łukasz Florczak

Reputation: 83

How to center 2 slides in Slick carousel?

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.net/lukaszflorczak/y7t64oqs/.

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

Upvotes: 2

Views: 11491

Answers (3)

Harry
Harry

Reputation: 167

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;
   }

Upvotes: 0

Logan Byers
Logan Byers

Reputation: 1573

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
 }

Upvotes: 0

Kamil Jankowiak
Kamil Jankowiak

Reputation: 45

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

Upvotes: 3

Related Questions