Question

我在我的网站上使用了光滑的旋转木马并且遇到了这样的问题。 http://prntscr.com/i9ojqf 我通过以下代码添加了幻灯片边框：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;
}

Answer 1

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

对我有用。

Answer 2

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

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

您的滑块是父级，每张幻灯片都是滑块的子级。当您在CSS文件中使用以下代码段时，您将定位幻灯片数组中的最后一个子代。

在CSS文件中：

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

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

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

Answer 3

要从上一张图片中删除边框，您可以使用3 1 4 8 0 0 0 0选择器。

:last-child

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

Answer 4

这是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 个答案: