左侧堆叠图右侧文字的Slick Slider实现及同步滑动咨询

完全可以用Slick Slider实现你需要的效果，以下是针对性的解决方案：

核心问题解决 #

1. centerMode文字适配问题：你之前的实现未对文字区域做布局适配，需要将每个slide拆分为「图片区」和「文字区」，通过CSS控制文字区仅在当前激活slide显示，图片区利用Slick的prev/active/next类实现左侧堆叠效果。
2. 数字指示器同步滑动：Slick默认的dots点击后会触发滑块滑动，只要左右区域属于同一个slide结构即可自然同步；若使用独立双滑块，可通过slickGoTo方法联动。

完整实现代码 #

HTML结构

<div class="slider-container">
  <!-- Slide 1 -->
  <div class="slide">
    <div class="image-box">
      <img src="https://via.placeholder.com/400x500" alt="Slide 1 Image">
    </div>
    <div class="text-box">
      <h2>标题一</h2>
      <p>这是对应第一张图片的描述文字，仅在当前slide激活时显示。</p>
    </div>
  </div>
  <!-- Slide 2 -->
  <div class="slide">
    <div class="image-box">
      <img src="https://via.placeholder.com/400x500" alt="Slide 2 Image">
    </div>
    <div class="text-box">
      <h2>标题二</h2>
      <p>这是对应第二张图片的描述文字，仅在当前slide激活时显示。</p>
    </div>
  </div>
  <!-- Slide 3 -->
  <div class="slide">
    <div class="image-box">
      <img src="https://via.placeholder.com/400x500" alt="Slide 3 Image">
    </div>
    <div class="text-box">
      <h2>标题三</h2>
      <p>这是对应第三张图片的描述文字，仅在当前slide激活时显示。</p>
    </div>
  </div>
</div>

CSS样式（堆叠效果核心）

.slider-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  position: relative;
}

.slide {
  display: flex;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 仅当前激活的slide显示文字 */
.slide.slick-active {
  opacity: 1;
}

.image-box {
  flex-shrink: 0;
  width: 50%;
  position: relative;
}

.image-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 左侧堆叠效果：前序slide的图片层级递减、左移 */
.slide.slick-prev .image-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transform: translateX(-25%);
}

.slide.slick-prev ~ .slick-prev .image-box {
  z-index: 1;
  transform: translateX(-50%);
}

.slide.slick-active .image-box {
  z-index: 3;
  position: relative;
  transform: none;
}

.text-box {
  width: 50%;
  padding: 0 60px;
  box-sizing: border-box;
}

/* 自定义数字指示器样式 */
.slick-dots {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
}

.slick-dots button {
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  border-radius: 50%;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 16px;
}

.slick-dots .slick-active button {
  background: #333;
  color: #fff;
}

JavaScript配置

$('.slider-container').slick({
  centerMode: true,
  slidesToShow: 3, // 显示3个slide以实现堆叠效果
  slidesToScroll: 1,
  infinite: true,
  arrows: true,
  rows: 0,
  dots: true,
  centerPadding: '0',
  edgeFriction: 0.2,
  // 自定义数字指示器
  customPaging: function(slider, index) {
    return `<button>${index + 1}</button>`;
  },
  // 若需双滑块联动，可在此添加同步逻辑
  afterChange: function(slick, currentSlide) {
    // 示例：联动另一个滑块
    // $('.other-slider').slick('slickGoTo', currentSlide.currentSlide);
  }
});

关键要点 #

• 通过slidesToShow:3让前后slide出现在当前slide左侧，结合CSS的z-index和transform实现堆叠效果；
• 利用slick-active类控制文字区域的显示状态，确保仅当前激活slide的文字可见；
• 自定义customPaging实现数字指示器，点击时Slick会自动同步滑块滑动，无需额外代码。

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