Slick Carousel滑块切换方向控制问题求助

默认的asNavFor同步逻辑只能按固定步数滚动，无法精准控制点击未选中项时的滚动方向和定位。我们可以通过自定义点击事件来实现需求：

1. 移除asNavFor配置，避免默认同步干扰自定义逻辑
2. 给.deneme的每个slide绑定点击事件，计算目标索引后控制两个滑块精准滚动
3. 添加选中slide的高亮样式，提升交互辨识度

修改后的完整代码：

JavaScript

// 初始化滑块，移除asNavFor
const $slider = $(".slider").slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  arrows: true,
  dots: false
});

const $deneme = $(".deneme").slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  draggable: true,
  infinite: true,
  swipeToSlide: true,
  verticalSwiping: true,
  centerMode: false,
  arrows: false,
  dots: true
});

// 绑定点击事件，控制滑块滚动
$deneme.on('click', '.slick-slide', function() {
  const targetIndex = $(this).data('slick-index');
  
  // 控制两个滑块跳转到目标索引
  $slider.slick('slickGoTo', targetIndex);
  $deneme.slick('slickGoTo', targetIndex);
  
  // 高亮选中的slide
  $('.slick-slide').removeClass('selected');
  $(this).addClass('selected');
});

CSS

.slick-slide {
  min-height: 50px;
  min-width: 50px;
  border: thin solid lightgray;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slick-slide.selected {
  border-color: #007bff;
  background-color: rgba(0,123,255,0.1);
}

HTML

<title>Didar Yanar Akademi | Site Slogan</title>
<main>
  <section class="education-section">
    <div class="container">
      <div class="row">
        <div class="slider">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>
        <div class="deneme mb-5 pb-5">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>
      </div>
    </div>
  </section>
</main>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Slick Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />

说明： #

• 使用slickGoTo方法直接跳转到目标索引，确保滑块按正确方向滚动到目标位置
• 保留了原有的滑动、拖拽等交互特性
• 高亮样式让用户能清晰识别当前选中的选项

内容的提问来源于stack exchange，提问作者Şükrü Esen