按下圆点时向外部按钮添加活动 class

Question

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

我有一件事要问，我怎样才能使这个功能成为双向的，就目前而言，当我点击我的外部按钮时，那个按钮被激活，因此侧向特定的滑块，但是当我点击光滑的点，它不会将活动 class 添加到我拥有的按钮。

我使用了 slickGoTo 方法，但我想知道如何才能实现这个新功能，比如当我点击第二个光滑点时它应该添加一个活动的class 到第二个数字图像图标。

我试过的代码是在设置之前将图像图标添加到 slick init，但没有成功。

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

这是在光滑滑块上工作的虚拟 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>

请注意：我不想删除圆点，只是在按下特定数量的圆点时，活动 class应该添加到那个特定的外部按钮。

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

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

Answer 1

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

关于您在 eq 上的查询：$('#external-buttons a') select #external-buttons 内的所有 a 标签，因此我们需要 select 一个特定的 a 标签。 eq 获取一个索引，然后 select 从元素集合中获取该索引上的元素。你可以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>

Answer 2

我以不同的方式解决了这个问题，通过使用点符号附加变量 ID 为每个点选择单独的节点，然后在您要显示的图像上强制执行点击事件，效果很好。

要添加到您的 main.js 文件夹或语句下方的 slick 控制语句文件夹的修正。

我隔离到视口 > 591 至于移动设备，它对我们来说工作正常，但在台式机或 IPAD Pro 上却不行。

// slick product images

$('.product-single__photos').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows:false,
    centerMode: true,
    fade: true,
    dots: true,
    fade:true,
    asNavFor: '.product-single__thumbnails'
});

$('.product-single__thumbnails').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.product-single__photos',
    //centerMode: true,
    // focusOnSelect: true,
    arrows: true
});

// force a click event so when the dot is clicked the image changes for desktop users.

if (window.innerWidth > 591) { 
    const sldot = document.querySelector('.slick-dotted > ul');

    sldot.addEventListener('click', (e) => {
        let dotClicked = e.target;


        if(dotClicked.id == "slick-slide-control01") {

            document.querySelector("#ProductThumbs > div > div > div.slick-slide.slick-current.slick-active > div > a > img").click();
        }else if(dotClicked.id == "slick-slide-control02") {
            document.querySelector("#ProductThumbs > div > div > div:nth-child(3) > div > a > img").click();
        }else if(dotClicked.id == "slick-slide-control00") {
            document.querySelector("#ProductThumbs > div > div > div:nth-child(1) > div > a > img").click();
        }else;
    });
}

现在在我们的 Shopify 网站上一切正常。

按下圆点时向外部按钮添加活动 class

Adding active class to external button when slick dots pressed

html

javascript

css

slick.js