Question

I have used a Slick Slider on my page. Now, everything works fine, but I have to make the particular div triggered on a specific button press. It is like if I have div-2, and I have a button named as button-2 somewhere in the section, on click of it, the slick slider should change it to the div 2, making it active with the right active slick dots.

I have researched about it and got to know that 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

您的代码中有一些错误。如何获取元素的索引取决于HTML上的元素

但是目前您必须div才能将index设置为1并递增/重置按钮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> click on slick slider

2 个答案: