光滑的滑块 - 幻灯片之间的边界答案

【问题标题】：Slick slider - borders between slides光滑的滑块 - 幻灯片之间的边界
【发布时间】：2018-02-03 19:27:15
【问题描述】：

我在我的网站上使用 slick-carousel 并且遇到了这样的问题。 http://prntscr.com/i9ojqf 我通过以下代码添加了边框 betwen 幻灯片：border-right: 5px solid red; 问题是：我怎样才能摆脱最后一张可见幻灯片的边框？谢谢！

<div class="slider js-slider">
<img /> four images here
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  <script>
    $(function() {
      $('.js-slider').slick({
        slidesToShow: 4
      });
    });
  </script>

body {
    background-color: #ff0;
}
.slider {
    width: 522px;
    margin: 150px auto 0;
    border: 5px solid green;
}
.slick-slide {
    height: 200px;
    box-sizing: border-box;
    border-right: 5px solid red;
}
img {
    max-width: 100%;
    height: 100%}
.slick-next, .slick-prev {
    position: absolute;
    left: -80px;
    top: 0;
}
.slick-next {
    left: auto;
    right: -50px;
}

【问题讨论】：

您可以使用 :last-child 选择器将边框设置为无
那不是最后一个元素是一个集合。
你能提供一个代码吗？
@test 提供。

标签： javascript jquery carousel slick.js

【解决方案1】：

.slick-slider {
    div {
        &:focus {
            outline: 0;
        }
    }
}

它对我有用。

【讨论】：

【解决方案2】：

由于无法访问您的代码，我无法给您明确的答案，但我可以试一试。

假设您的滑块对象具有.slider 类，并且您的每张幻灯片都具有.slide 类。

您的滑块是父滑块，每张幻灯片都是滑块的子滑块。当您在 CSS 文件中使用以下代码 sn-p 时，您的目标是幻灯片数组中的最后一个子项。

在您的 CSS 文件中：

    .slider .slide:last-child{
       border-right: none;
    }

您的特定滑块上的类名会有所不同，因此您应该将它们更改为实际使用的滑块和幻灯片类。

我希望这是有道理的。我是 StackOverflow 的新手，想提供帮助。

【讨论】：

【解决方案3】：

这是 Jquery 的解决方案：

$('.slick-active').addClass('border-right').removeClass('border-right--no');
$('.slick-active:last').addClass('border-right--no');

$( ".slick-arrow" ).click(function() {
    $('.slick-active').addClass('border-right').removeClass('border-right--no');
    $('.slick-active:last').addClass('border-right--no');
});

<style>
.border-right {
  border-right: 1px solid #000;
}

.border-right--no {
  border-right: 0;
}
</style>

【讨论】：

【解决方案4】：

要去除最后一张图片的边框，可以使用:last-child选择器。

.slick-slide:last-child {
   border-right: 0;
}

演示：https://jsfiddle.net/g04jrd3n/

【讨论】：

谢谢，但这不是解决方案（在这种情况下我需要删除边框。jsfiddle.net/g04jrd3n/1 从初始状态和每次下一步操作（从所有可见的最后一张幻灯片中删除边框）跨度>