CODEWITHSUNDEEP
jquerycarouselslick.js
user2562674
user2562674

Reputation: 41

Slick.js center mode for 3 slides with navigation

Is it possible to just have 3 slides on a Slick.js carousel with navigation so essentially the middle slide becomes larger.

I've setup a codepen showing first how more than 3 slides operates but when you only have 3 slides, Slick.js removes the navigation and it no longer works.

http://codepen.io/mellomedia/pen/GqLjjX

$(document).on('ready', function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

Upvotes: 1

Views: 14603

Answers (1)

gambala
gambala

Reputation: 211

That's how slick.js works. It removes any navigation if all slides are showing on the screen. And that's ok behavior.

I recommend you stylize your slides only if navigation is showing:

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

You will got a result like this:

enter image description here

See the full example: http://codepen.io/gambala/pen/akxBXr

Upvotes: 5

Related Questions