javascript - Center active slide with showing 3 slides in slick.js - Stack Overflow

admin管理员组

文章数量:1302232

I'm using slick.js plugin and I want to make something like on their website. Here is DEMO.

Problem is, that first active slide 1 is not centered. I know I can use

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    focusOnSelect: true,
    centerMode: true
});

but then there are not 3 slides, but also parts of another 2 slides, see HERE

I'm using slick.js plugin and I want to make something like on their website. Here is DEMO.

Problem is, that first active slide 1 is not centered. I know I can use

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    focusOnSelect: true,
    centerMode: true
});

but then there are not 3 slides, but also parts of another 2 slides, see HERE

• javascript
• jquery
• html
• css
• slick.js

Share Improve this question Follow asked May 3, 2016 at 14:25 Patrik KrehákPatrik Krehák 2,68388 gold badges3434 silver badges6363 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Well, this is so embarrassing. All it needs to have is set option centerPadding to 0 (beside setting centerMode to true). I don't know why I haven't seen this before. Anyway, here is my 1-month update:

WORKING DEMO

If I'm understanding your question correctly, you're going to have to programmatically hide the partial slides. It would have been great if this functionality existed natively, but it doesn't. Maybe in a future release.

Please read the ments for a brief outline of what I'm doing:

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

//Execute the function to apply the visibility on dom ready.
$(setSlideVisibility());

//Re-apply the visibility in the beforeChange event.
$('.slider-nav').on('beforeChange', function() {
  $('.slick-slide').each(function() {
    $(this).css('opacity', 1);
  });
});

//After the slide change has pleted, call the setSlideVisibility to hide the partial slides.
$('.slider-nav').on('afterChange', function() {
  setSlideVisibility();
});

Fiddle Demo

本文标签： javascriptCenter active slide with showing 3 slides in slickjsStack Overflow