Question

如果幻灯片中添加了边框，则轨道中的最后一张幻灯片不会显示右边框。这个JS小提琴显示了这种确切的行为。最后一张幻灯片没有任何正确的边框。

HTML：

.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;
}

CSS：

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

JS（只是SlickJS部分）：

step 0, training accuracy 0.08
step 100, training accuracy 0.1
step 200, training accuracy 0.16
step 300, training accuracy 0.22
step 400, training accuracy 0.1
step 500, training accuracy 0.18
step 600, training accuracy 0.26
step 700, training accuracy 0.16
step 800, training accuracy 0.24
...
step 19600, training accuracy 0.9
step 19700, training accuracy 0.82
step 19800, training accuracy 0.98
step 19900, training accuracy 0.86
test accuracy 0.9065

任何帮助都将受到高度赞赏。谢谢！

Answer 1

您的.slider .x班级使用width: 100%;并且您还应用了2px边框，这意味着总宽度相当于100% + 2px。

您可以将box-sizing: border-box;属性应用于.slider .x个样式。这将考虑总宽度中的填充和边框。 Read more here.

Answer 2

这是插件的一个错误，它会使每张幻灯片的宽度变圆。如果容器的宽度不能被显示的幻灯片完全整除，则会导致此问题。

请参阅Issue #2167: Slide width incorrect with slides to show greater than 2

提供了一种解决方法，但您需要更改插件代码以删除舍入。

光滑的JS - 幻灯片上的右边框没有显示

2 个答案: