如何修改slick slider轮播组件内的部分指定div内容

你可以通过初始化两个关联同步的slick滑块来实现需求，分别对应description区块和image区块的轮播，两个滑块切换时保持同步即可，具体操作步骤如下：

1 调整HTML结构 #

把所有需要轮播的描述项、图片对分组，分别包裹到slick容器内，示例结构如下：

<div class="col-xl-6 col-lg-6 col-md-12 mb-12 left">
  <div class="row">
    <div class="col-xl-6 col-lg-6 col-md-12 mb-12 gold-box">Moss'tan sonra...</div>
    <div class="col-xl-6 col-lg-6 col-md-12 mb-12">
      <!-- 描述内容轮播容器 -->
      <div class="description-slider">
        <!-- 轮播项1 -->
        <div class="description-item">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
        </div>
        <!-- 轮播项2 可自行新增更多-->
        <div class="description-item">
          第二组描述内容，和第二组图片对应
        </div>
      </div>
      <div class="buttons">
        <button type="button" class="btn btn-fill-primary prev-btn"><i class="fa fa-caret-left"></i></button>
        <button type="button" class="btn btn-fill-primary next-btn"><i class="fa fa-caret-right"></i></button>
      </div>
    </div>
  </div>
  <div class="row">
    <!-- 图片内容轮播容器 -->
    <div class="image-slider">
      <!-- 轮播项1 对应描述1 -->
      <div class="image-item">
        <div class="col-xl-6 col-lg-6 col-md-12 mb-12 image">
          <img src="assets/images/index/before.png" alt="Before Car" />
          <div class="bottom-text before">Öncesi</div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-12 mb-12 image">
          <img src="assets/images/index/after.png" alt="After Car" />
          <div class="bottom-text after">Sonrası</div>
        </div>
      </div>
      <!-- 轮播项2 对应描述2 可自行新增更多-->
      <div class="image-item">
        <div class="col-xl-6 col-lg-6 col-md-12 mb-12 image">
          <img src="assets/images/index/before2.png" alt="Before Car 2" />
          <div class="bottom-text before">Öncesi</div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-12 mb-12 image">
          <img src="assets/images/index/after2.png" alt="After Car 2" />
          <div class="bottom-text after">Sonrası</div>
        </div>
      </div>
    </div>
  </div>
</div>

注意：给自定义的左右按钮新增了prev-btn和next-btn类名方便绑定事件，按钮type改为button避免触发表单提交

2 新增基础CSS #

隐藏slick默认自带的箭头，避免和自定义按钮冲突：

.description-slider .slick-arrow,
.image-slider .slick-arrow {
  display: none !important;
}

3 编写JS初始化逻辑 #

初始化两个slick滑块，设置关联同步，绑定自定义按钮的切换事件，同时开启自动轮播：

$(function(){
  // 初始化图片轮播
  $('.image-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true, // 可选，切换效果改为淡入淡出
    autoplay: true, // 开启自动轮播
    autoplaySpeed: 3000, // 自动轮播间隔，单位毫秒
    asNavFor: '.description-slider' // 和描述轮播关联
  });
  // 初始化描述轮播
  $('.description-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.image-slider' // 和图片轮播关联
  });

  // 绑定自定义按钮切换事件
  $('.prev-btn').click(function(){
    $('.description-slider').slick('slickPrev');
  })
  $('.next-btn').click(function(){
    $('.description-slider').slick('slickNext');
  })
})

配置说明：

• asNavFor参数是两个滑块同步的核心，配置后任意一个滑块切换都会触发另一个同步切换
• 可根据需求调整autoplay、autoplaySpeed参数控制自动轮播的开启和切换速度
• 如果不需要淡入淡出效果，删除fade: true配置即可，默认是左右滑动效果

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