如何使用JavaScript Slick Carousel实现显示2个半滑动项效果

你不需要调整现有HTML结构，仅补充Slick初始化配置即可实现需求，两种常用实现方案如下：

方案一：小数数值配置（最简便） #

直接将slidesToShow参数设置为带小数的数值，整数部分对应完整展示的项数，小数部分对应第三项露出的比例，参考配置：

// 需确保jQuery、slick核心js和css文件已正确引入
$(function(){
  $('.responsive').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 2.2, // 2个完整项 + 20%宽度的第三项露出
    slidesToScroll: 1,
    // 如需响应式适配不同屏幕，可新增断点配置
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1.2 // 移动端显示1个完整项+部分露出第二项
        }
      }
    ]
  })
})

方案二：居中模式配置 #

如果需要当前轮播项始终居中展示，可以配合centerMode和centerPadding参数实现，参考配置：

$(function(){
  $('.responsive').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 2,
    slidesToScroll: 1,
    centerMode: true, // 开启居中模式
    centerPadding: '10%' // 左右两侧预留10%宽度，用来露出前后项内容
  })
})

注意事项 #

• 可根据设计需求调整slidesToShow的小数值或centerPadding的大小，匹配你需要的第三项露出宽度
• 若轮播项自定义了内外边距，需要对应调整配置参数，避免出现内容裁切或布局错位
• 初始化代码需要在DOM加载完成后执行，确保轮播容器已经渲染完毕

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