如何删除光滑轮播中最后一个项目的填充/空间

Question

首先我没有使用

centerMode: true

，而是使用

slick-list

padding-right of 20%

。我的问题是如何删除光滑轮播中最后一项的

padding-right

。我正在考虑使用检查 slick 中某个项目的

length

然后将其设置为

slickSetOption

，但我不知道该怎么做。

顺便说一句，你可以更改代码，重要的是我想去掉 slick 最后一项上的空格，但 slick

infinite: false

和

centerMode: false

会保留。

下面是我的代码，为了更好地理解这里是框代码https://codepen.io/。

function slickRemoveLastSpaceItem() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
        infinite: false
    });
}

slickRemoveLastSpaceItem();

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
  background: red;
  border: 3px solid red;
}
.slider-content {
  background: #fff;
  font-size: 3rem;
  text-align: center;
  height: 200px !important;
  border: 1px solid blue;
}

.slick-list {
  padding: 0 20% 0 0 !important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>


<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
  </div>
</div>

Answer 1

当最后一项变得可见时，您可以

slick.slideCount

并更改填充。在本例中，我使用了一个类。

function slickRemoveLastSpaceItem() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
        infinite: false
    });
}

slickRemoveLastSpaceItem();

$('.slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if(nextSlide == slick.slideCount-1) {
    $('.slick-list').addClass('lastItem');
  } else {
    $('.slick-list').removeClass('lastItem');
  }
});

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
  background: red;
  border: 3px solid red;
}
.slider-content {
  background: #fff;
  font-size: 3rem;
  text-align: center;
  height: 200px !important;
  border: 1px solid blue;
}

.slick-list {
  padding: 0 20% 0 0!important;
}

.slick-list.lastItem {
  padding: 0 0 0 20%!important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
  </div>
</div>