slick.jsに3つのスライドを表示するセンターアクティブスライド

Question

私はslick.jsプラグインを使用しています。私は彼らのウェブサイト上のようなものを作りたいと思います。ここにはDEMOがあります。

問題は、その最初のアクティブスライド1が中央にないことです。私は

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

使用することができます知っているが、その後3枚のスライドが存在していないですが、また別の2枚のスライドの部分は、私が正しくあなたの質問を理解していた場合、あなたがする必要があるとしているHERE

Answer 1

まあ、これは恥ずかしいです。必要なのは、centerPaddingを0に設定するだけです。なぜ私はこれを見たことがないのか分からない。

とにかく...私が望んで何かがだが、サイドにスペースがある

WORKING DEMO

Answer 2

見ます部分的にスライドをプログラムで隠すこの機能がネイティブに存在していれば素晴らしいだろうが、そうではない。多分将来のリリースであろう。

私がやっているの簡単な概要についてはコメントをお読みください：

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 completed, call the setSlideVisibility to hide the partial slides. 
$('.slider-nav').on('afterChange', function() { 
    setSlideVisibility(); 
}); 

Fiddle Demo