javascript - 当按下光滑点时将事件类添加到外部按钮

Question

我有一个布局，其中有一个光滑的 slider ，一个带有图像图标的图像，单击时可以转到特定的幻灯片。光滑的 slider 有 3 个 slider ，工作正常。

我有一件事要问，我怎样才能使该功能成为两种方式，就目前而言，当我单击外部按钮时，该按钮会被激活，因此侧向特定 slider ，但是当我单击光滑时点，它不会将事件类添加到我拥有的按钮中。

我已经使用了 slickGoTo 方法，但我想知道如何实现这个新事物，例如当我单击第二个数字光滑点时，它应该向第二个数字添加一个事件类图像图标。

我尝试过的代码是在设置之前将图像图标添加到光滑的初始化中，但没有成功。

$('.box-one').on('init', function(event, slick){
  var $items = slick.$dots.find('li');
  $items.addClass('.img-logo');
});

这是在光滑 slider 上工作的虚拟 div :

<div>
 <div class='box-one'>
    <div>1st DIV</div>
    <div>2nd DIV</div>
    <div>3rd DIV</div>
 </div>

 <div class='external-icons'>
     <div class='logo-group'>
       <a class='intro-logo-1 active'><img></a>
       <a class='intro-logo-2'><img></a>
       <a class='intro-logo-3'><img></a>
     </div>
 </div>
</div>

请注意:我不想删除光滑点，只是在按下特定数量的光滑点时，应将事件类添加到该特定的外部按钮。

这是该部分的屏幕截图，我希望这能让您清楚地了解我的页面布局和工作。

我希望在你们的帮助下，我能学到新东西，并能够实现我的目标。谢谢

Answer 1

由于外部按钮不与 slider 功能直接关联，因此您需要手动监听幻灯片更改事件并引起任何外部效果(在本例中突出显示相应的外部按钮)。我在下面准备了一个演示。

关于 eq 上的查询:$('#external-buttons a') 选择 内的所有 a 标记#external-buttons，因此我们需要选择一个特定的 a 标签。 eq 获取一个索引并从元素集合中选择该索引上的元素。您可以read more about eq here

$('.slick-slider').slick({
dots: true
  });
  
  $('.slick-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $('#external-buttons a.active').removeClass('active');
  $('#external-buttons a').eq(nextSlide).addClass('active');
});
  
  
$('#external-buttons a').on('click', function(e){
  e.preventDefault();
  $('#external-buttons a.active').removeClass('active');
  $(this).addClass('active');
  var targetSlide = $(this).data('target');
  $('.slick-slider').slick('slickGoTo', targetSlide );
});//click()

#external-buttons a.active{
 background-color: orange;
 color: white;
}

<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="slick-slider">
  <div><img src="http://placekitten.com/300/200" alt="slide 1" /></div>
  <div><img src="http://via.placeholder.com/300x200" alt="slide 2" /></div>
  <div><img src="https://placeimg.com/300/200/any" alt="slide 3" /></div>
</div>


<h3>External buttons</h3>
<div id="external-buttons">
  <a data-target="0">Slide 1</a>
  <a data-target="1">Slide 2</a>
  <a data-target="2">Slide 3</a>
 </div>