I'm using slick-carousel on my website and have such problem. I added border bettwen slides by this code: border-right: 5px solid red; Question is: how can i get rid of border for the very last visible slide here? Thanks!

<div class="slider js-slider">
<img /> four images here
</div>
  <script src=".3.1/jquery.min.js"></script>
  <script src=".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;
}

I'm using slick-carousel on my website and have such problem. http://prntscr./i9ojqf I added border bettwen slides by this code: border-right: 5px solid red; Question is: how can i get rid of border for the very last visible slide here? Thanks!

<div class="slider js-slider">
<img /> four images here
</div>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare./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;
}

• javascript
• jquery
• carousel
• slick.js

• You can use :last-child selector to set border to none – test Commented Feb 3, 2018 at 19:32
• That's not the last element is a set. – Ростислав Силивейстр Commented Feb 3, 2018 at 19:35
• Could you provide a code? – test Commented Feb 3, 2018 at 19:37
• @test provided. – Ростислав Силивейстр Commented Feb 3, 2018 at 19:49

4 Answers 4

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

It's working for me.

Without having access to your code, I can't give you a definitive answer, but I can give it a go.

Let's assume your slider object has the class of .slider and each of your slides has a class of .slide.

Your slider is the parent and each slide is a child of the slider. When you use the following code snippet in your CSS file, you are targeting the last child in the slide array.

In your CSS file:

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

The class names on your specific slider will differ so you should change them to the actual slider and slide classes used on your end.

I hope this makes sense. I'm new to StackOverflow and trying to help.

This is the solution with 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>

To remove border from the last image, you can use :last-child selector.

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

Demo: https://jsfiddle/g04jrd3n/