如何配置Slick Slider实现主幻灯片+前后各显25%的效果

要实现主幻灯片完整显示、前后幻灯片各展示25%的效果，只需调整以下配置：

1. 修改jQuery配置 #

调整centerPadding为0，依赖CSS控制幻灯片宽度：

$('.a-slick-wrap').slick({
    dots: true,
    arrows: true,
    focusOnSelect: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '0', // 移除固定内边距，改用CSS控制布局
});

2. 修正CSS样式 #

通过设置幻灯片宽度、溢出规则实现预期效果：

.about-slideshow {
    overflow: hidden; /* 隐藏超出容器的幻灯片部分 */
    .slick-container{
        width: 100%;
        margin: 0 auto;
    }
    .a-slick-wrap{
        .slick-list {
            overflow: visible; /* 允许前后幻灯片露出部分内容 */
        }
        .slide {
            width: 50% !important; /* 主幻灯片占容器50%宽度，前后各留25%空间 */
            height: 480px;
            background: red;
            position: relative;
            border-radius: 16px;
            padding: 0 25px;
            box-sizing: border-box; /* 确保padding不影响宽度计算 */
        }
        /* 可选：给当前激活的幻灯片添加视觉区分 */
        .slick-center .slide {
            transform: scale(1.05);
            transition: transform 0.3s ease;
        }
    }
}

原理说明 #

• centerMode: true 让当前幻灯片居中显示
• 幻灯片宽度设为容器的50%，结合外层容器的overflow: hidden，刚好让前后幻灯片各露出25%的内容
• .slick-list 设置overflow: visible，确保前后幻灯片的部分内容能正常显示

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