Slick轮播组件最后一项右侧内边距/空白去除方法

需求说明 #

未使用centerMode: true，通过给.slick-list设置20%的padding-right实现布局，但需要在保留infinite: false和centerMode: false配置的前提下，消除轮播最后一项的右侧空白。

解决方案：利用Slick切换事件动态调整padding #

通过监听Slick的afterChange事件，判断当前展示的是否为最后一个slide，动态修改.slick-list的右侧padding：

修改后的JavaScript代码

function slickRemoveLastSpaceItem() {
    const $slider = $('.slider-for');
    $slider.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        dots: true,
        infinite: false,
        // 监听轮播切换事件
        afterChange: function(slick, currentSlide) {
            const totalSlides = slick.slideCount;
            // 当前为最后一项时移除右侧padding
            if (currentSlide.currentSlide === totalSlides - 1) {
                $('.slick-list').css('padding-right', '0');
            } else {
                // 其他项恢复20%右侧padding
                $('.slick-list').css('padding-right', '20%');
            }
        }
    });
    // 初始化时检查当前slide，避免加载时默认显示最后一项仍有空白
    const initialSlide = $slider.slick('slickCurrentSlide');
    const totalSlides = $slider.slick('getSlick').slideCount;
    if (initialSlide === totalSlides - 1) {
        $('.slick-list').css('padding-right', '0');
    }
}

slickRemoveLastSpaceItem();

调整后的CSS代码

移除padding-right的!important声明，让JS可以动态修改样式：

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

HTML代码（无需修改）

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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/slick-carousel@1.8.1/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>

核心逻辑说明 #

1. 通过afterChange事件捕获轮播切换后的状态，判断当前slide索引是否等于总slide数减1（即最后一项）
2. 初始化时额外检查当前slide状态，避免页面加载时默认显示最后一项仍有空白
3. 移除CSS中的!important声明，确保JS能正确覆盖样式

内容的提问来源于stack exchange，提问作者clarkf