Slick JS - 幻燈片上的右邊框不顯示

如果在幻燈片中添加了邊框，則上一張幻燈片中的軌道不會顯示右邊框。這JS小提琴顯示這種確切的行爲。最後一張幻燈片沒有任何右邊框。Slick JS - 幻燈片上的右邊框不顯示

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

任何幫助將高度讚賞。謝謝！

來源

2017-10-21 Christian M. Raymonds

.slider .x您的.slider .x類使用width: 100%;並且您還應用了2px邊框，這意味着總寬度相當於100% + 2px。

您可以將box-sizing: border-box;屬性應用於.slider .x款式。這將考慮總寬度中的填充和邊框。 Read more here.

來源

2017-10-21 23:25:31

但是，您當前的代碼仍可能會切斷最後一個邊框，因爲滑塊寬度並不總是4的倍數（幻燈片數量）。例如滑塊寬度爲99px的幻燈片寬度爲25px。 25x4是100px，導致1px是滑動的 –

嗯..我希望我可能錯過了一些設置或其他東西。但是，聽起來像代碼編輯它畢竟是。 –

一定要應用'box-sizing：border-box;'，否則仍然會有一些滑動的邊框 –

這是一個插件的錯誤，它將每張幻燈片的寬度向上舍入。當容器的寬度不能被所示的幻燈片整除時，會導致這個問題。

見Issue #2167: Slide width incorrect with slides to show greater than 2

了一種解決方法提供，但你需要改變插件代碼刪除四捨五入。

來源

2017-10-21 23:43:56

我不介意修改代碼。我將立即檢查鏈接。欣賞它。 –

你的答案和下一個傢伙的答案几乎相同，除了鏈接。那傢伙的票比較低。所以，我接受他的。請不要介意這一點。我非常感謝你的幫助人！ –

@ ChristianM.Raymonds根本不介意。 –

Slick JS - 幻燈片上的右邊框不顯示

回答

相關問題