Slick JS - スライドに右枠が表示されない

Question

枠に枠が追加されている場合、最後のスライドのトラックには、右の枠が表示されません。 このJS Fiddleは、この正確な動作を示しています。最後のスライドには右の枠がありません。

HTML：

<section class="slider"> 
    <div class="x">slide1</div> 
    <div class="x">slide2</div> 
    <div class="x">slide3</div> 
    <div class="x">slide4</div> 
    <div class="x">slide5</div> 
    <div class="x">slide6</div> 
</section> 

CSS：

.slider { 
    width: auto; 
    margin: 30px 50px 50px; 

.slick-slide { 
    background: #3a8999; 
    color: white; 
    padding: 40px 0; 
    font-size: 30px; 
    font-family: "Arial", "Helvetica"; 
    text-align: center; 
} 

.slick-prev:before, 
.slick-next:before { 
    color: black;  
} 

.slick-dots { 
    bottom: -30px; 
} 

.slick-slide:nth-child(odd) { 
    background: #e84a69; 
} 

.x { 
    border: solid 2px black; 
} 

JS（ジャストSlickJS部）：

$(".slider").slick({ 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 2000, 
    arrows: false  
}); 

すべてのヘルプは高く評価されるだろう。 ありがとう！

Answer 1

.slider .xクラスはwidth: 100%;を使用し、2pxのボーダーも適用しました。つまり、合計幅は100% + 2pxに相当します。

スタイルにbox-sizing: border-box;プロパティを適用することができます。これは、合計幅のパディングと境界を考慮に入れます。 Read more here.

Answer 2

これは、各スライドの幅を切り上げるプラグインのバグです。示されたスライドによって容器の幅が正確に割り切れない場合、この問題が生じる。

は回避策が提供されIssue #2167: Slide width incorrect with slides to show greater than 2

を参照してください、しかし、あなたは、丸めを除去するためのプラグインのコードを変更する必要があります。