单击元素以更改光滑的滑块

Question

我有一个部分，其中第一行是徽标，第二行是与这些徽标相关联的引号。

在每次徽标点击时，我希望它切换到与该徽标/公司关联的报价。

我已经尝试过asNavFor，但它没有按预期工作（参见演示）。

出于演示和简单的目的，我将在下面使用文本来展示我的问题。

在下面的演示中，这是我想要实现的目标：

• 顶部的triggers 本质上是我的徽标。中心徽标（触发器 2）是默认处于活动状态的光滑幻灯片。
• 当用户单击另一个触发器（例如触发器 3）时，我希望下面 div 中的文本与该幻灯片匹配（因此应该显示“幻灯片 3（用于触发器 3）”）。

注意：我使用 slick.js 的原因是因为用户也可以拖动底部 div 来更改幻灯片（并使用光滑箭头）

代码：

$(function(){

  const nav = $("#section_navi");
  const slider = $("#section__slick");


/*   $(nav).slick({
   slidesToShow: 3,
   slidesToScroll: 3,
   arrows: false,
   fade: true,
   asNavFor: slider
  }); */

  $(slider).slick({
    arrows: false,
    dots: false,
    mobileFirst: true,
    slidesToScroll: 1,
    infinite: true,
    /* asNavFor: nav */
 });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<section class="section">
  <div class="section__inner">

    <!-- nav -->
    <div class="section__nav" id="section_navi">
      <span class="section__image">Trigger 1</span>
      <span class="section__image">Trigger 2</span>
      <span class="section__image">Trigger 3</span>
    </div>
    
    <!-- slides -->
    <div class="section__cards" id="section__slick">
      <div class="card">Slide 1 (for trigger 1)</div>
      <div class="card">Slide 2 (for trigger 2)</div>
      <div class="card">Slide 3 (for trigger 3)</div>
    </div>

  </div>
</section>

Answer 1

$('.trigger li').on('click', function() {
  $('.trigger li').removeClass('active');
  $('.slider li').removeClass('active');
  $(this).addClass('active');
  debugger;
  var index=parseInt($(this).attr('data-trigger'));
  $($('.slider li')[index-1]).addClass('active')
})

ul {
  list-style: none;
  padding: 0;
}

.trigger {
  display: flex;
}

.trigger li {
  flex: 1;
}

.trigger li.active {
  color: blue;
}

.slider {
  position: relative;
  height: 200px;
}

.slider li {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: 0;
  transition: all 0.3s ease;
}

.slider li:nth-child(3n+1) {
  background-color: yellow;
}

.slider li:nth-child(3n+2) {
  background-color: blue;
}

.slider li:nth-child(3n+3) {
  background-color: red;
}

.slider li.active {
  z-index: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <ul class="trigger">
        <li data-trigger="1">Trigger 1</li>
        <li data-trigger="2" class="active">Trigger 2</li>
        <li data-trigger="3">Trigger 3</li>
    </ul>
    <ul class="slider">
        <li>Slide 1</li>
        <li class="active">Slide 2</li>
        <li>Slide 3</li>
    </ul>
</section>

看看这个，我没用过任何插件。