在外部按钮上触发 div/<a> 单击光滑的滑块

Question

我在我的页面上使用了 Slick Slider。现在，一切正常，但我必须在按下特定按钮时触发特定的 div 。就像我有 div-2，并且我在该部分的某处有一个名为 button-2 的按钮，单击它时，光滑的滑块应将其更改为 div 2，使它以正确的活动光滑点激活。

我已经对此进行了研究，并且知道 sliderGoTo 可以完成我的工作。但我不知道为什么它不能正常工作。我已经尽力了，但不知何故按钮根本没有触发正确的 div。

到目前为止我尝试过的（伪形式）：

$(document).ready(function() {
  $('.box').slick({
    dots: true,
    arrows: false
  });

  $('#trigger-button').click(function() {
      slideIndex = $(this).index();
      $('.slideshow').slickGoTo(parseInt(slideIndex));
    )
  }
});

/*$('#trigger-button').click(function() {
  var slider = $('.box');
  slider[1].slickGoTo(parseInt(actIndex));
})*/ 

//Alternatively used

<a class='btn' id='trigger-button' href='#'>Button 2</a>
<div class='box'>
  <div class='div-1'>
    Some content
  </div>
  <div class='div-2'>
    Some content
  </div>
</div>

我也试过这个，因为我想要触发特定的 div，即 div-2，当我们按下 ID 为 trigger-button 的按钮时触发。可以在评论中找到。

但是没有结果。我对 SLICK SLIDER 的使用经验不多，但我已经尝试过了。我很乐意了解更多相关信息。谢谢

编辑

谢谢你们帮助我。我找到了一个适合我的解决方案，而且方法也更简单。如果你想去一个特定的位置，你必须使用这个语法，你的工作就完成了：

$('.box').slick('slickGoTo', divNo)。记住 divNo = currentPos - 1。

如今，slickGoTo 不像以前的语法 .slickGoTo(parseInt(slideIndex)); 那样工作。它会给你一个错误 Undefined slickGoTo method。我的代码中描述了正确的用法。再次感谢，我相信这会在以后的参考中帮助人们。

Answer 1

你的 code.How 中有一些错误你可以获得元素的索引取决于你在 HTML

上的元素

但目前您必须 div 以便您可以将 index 设置为 1 和 increment/reset onclick 按钮。

替换

$('#trigger-button').click(function() {
      slideIndex = $(this).index();
      $('.slideshow').slickGoTo(parseInt(slideIndex));
    )
  }

至

var indexVal=1;  $("#trigger-button").click(function(e){
        e.preventDefault();
       // slideIndex = $(this).index();
        $( '.box' ).slickGoTo(indexVal);
        indexVal=indexVal+1;
        if(indexVal>2){
        indexVal=1;
        } });

这是适合您的工作片段：

$(document).ready(function() {
  $(".box").slick({
        dots: true,
    arrows: false
    });

});
var indexVal=1;
 $("#trigger-button").click(function(e){
        e.preventDefault();
       // slideIndex = $(this).index();
        $( '.box' ).slickGoTo(indexVal);
        indexVal=indexVal+1;
        if(indexVal>2){
        indexVal=1;
        }
    });

/*$('#trigger-button').click(function() {
  var slider = $('.box');
  slider[1].slickGoTo(parseInt(actIndex));
})*/ 

//Alternatively used

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"/></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css"/>

<a class='btn' id='trigger-button' href='#'>Button 2</a>


<div class='box'>
  <div class='div-1'>
    Some content1
  </div>
  <div class='div-2'>
    Some content2
  </div>
</div>

Answer 2

请尝试使用 $('.box').slick('slickGoTo', parseInt(slideIndex), false);。

旁注：我不确定使用 .index() 是否总能按预期工作。

查看 https://github.com/kenwheeler/slick 了解更多详情。

在外部按钮上触发 div/<a> 单击光滑的滑块

Trigger a div on an external button/<a> click on slick slider

html

javascript

slick.js