Question

我有一个带有光滑滑块的布局，即带有图像图标的图像，单击后可以转到特定的幻灯片。光滑的滑块有3张幻灯片，效果很好。

我要问的一件事是，如何使该函数成为两种方式，就目前而言，当我单击外部按钮时，该按钮将处于活动状态，因此位于特定滑块的侧面，但是当我单击滑动按钮时点，它不会将活动类添加到我所拥有的按钮中。

我使用了 slickGoTo 方法，但是我想知道如何才能实现这一新功能，例如当我单击第二个数字浮点时，它应该为第二个数字添加一个活动类图片图标。

我尝试过的代码是在设置之前将图像图标添加到光滑的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>

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

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

我希望在大家的帮助下，我将学习新事物，并能够实现自己的目标。谢谢

Answer 1

由于外部按钮与直接起作用的滑块没有关联，因此您需要手动收听幻灯片更改事件并引起任何外部影响（在这种情况下，突出显示相应的外部按钮）。我已经在下面准备了一个演示。

关于对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>

Answer 2

我通过用点符号附加变量id为每个点选择单独的节点，然后在要显示的图像上强制单击事件，从而起到了一种不同的攻击方式。

要添加到您的main.js文件夹或该语句下面的光滑控制语句文件夹中的修改。

我隔离到视口> 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网站上一切正常。

按下圆滑点时将活动班级添加到外部按钮

2 个答案: