Slick Carousel - centerMode without excess slides

Question

I want to make a slide (using Slick.js), based on the picture, I want to make centerMode:true and focusOnSelect:true...

but the problem is there will be two excess slide (left and right). How do I remove them?

I already tried to set centerMode to false. There will be no excess slide, but the selected slide will be on the most left. So it is important for me to set the centerMode to true, because I want to make the selected slide in center.

Sorry for my bad english.

Any help will be appreciated.

Thanks

Answer 1

You could create a method that applies an opacity of 0 to the slide that appears before the first as well as to the slide that appears after the last i.e. the partial slides. You can call this method after initialization of the slider and after every slide change via the afterChange event:

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $('.slick-slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
  });
  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
  $(visibleSlides).last().next().css('opacity', 0);
}

$(setSlideVisibility());

$('.slider').on('afterChange', function() { 
  setSlideVisibility();
});

Fiddle Demo

Answer 2

I have a simpler solution. Work only in centerMode.

.slick-slide {
  opacity: 0;
}
.slick-slide.slick-center {
  opacity: 1;
}