javascript - 带有自定义 slider 导航的 Slick GoTo 将不起作用

Question

我创建了一个带有自定义 slider 导航的 slider 。代码如下:

<!-- Slider Parent -->
<div class="col-md-6 col-xs-12">
      <div class="gallery slider-parent">
        <% @activity.galleries.each_with_index do |gallery, index| %>
          <%= image_tag gallery.documentation.url(:large, width: '100%') %>
        <% end %>
      </div>
    </div>

    <!-- Slider Navigation -->
    <div class="col-md-6 col-xs-12">
      <div class="slider-nav">
        <% @activity.galleries.each_slice(3) do |galleries| %>
          <div class="row">
            <% galleries.each do |gallery| %>
              <div class="col-md-4">
                <a href="#"><%= image_tag gallery.documentation.url(:medium) %></a>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>

这里的 JS 看起来像 application.js:

// Image gallery
$('.gallery').slick( {
  autoplay: true,
  arrows: false
});

var $parent = $(".gallery.slider-parent");
var $nav = $(".slider-nav").find("a");

$nav.click(function(e){
  e.preventDefault();
  slideIndex = $(this).index();
  $parent.slick('slickGoTo', parseInt(slideIndex) );
});

但是，Slider Parent 与我单击的 Slider Navigation 不匹配。我认为问题在于 $nav = $(".slider-nav").find("a"); 不会同步 slider 父项。我尝试将 slider 导航代码更改为如下所示:

<!-- Slider Navigation -->
<div class="col-md-6 col-xs-12">
      <div class="slider-nav">
        <% @activity.galleries.each do |gallery| %>
          <a href="#"><%= image_tag gallery.documentation.url(:medium) %></a>
        <% end %>
      </div>
 </div>

而且它有效。但是， slider 导航没有我想要的样式。有什么建议吗？

更新

我试图用 jQuery 找到关键字来定位最深的元素，我发现了这个:

  // Select deepest child elements
  (function( $ ) {
  $.fn.deepest = function(selector){
      var targ = $(this);
      var result = [];

      //If there is no selector just drill down to the furthest child
      if (typeof (selector) === 'undefined') {
          selector = "*";
          while ( $(targ).children(selector).length ) {
              targ = $(targ).children(selector);
          }
          return targ;
      };

      //Get to the deepest point from which the selector can be seen
      while ( $(targ).find(selector).length ) {
          targ = $(targ).children('*');
      }

      //Only keep the elements that match the selector
      targ = $(targ).each(function(i, obj){
          if ($(obj).is(selector) ) {
              result.push(obj)
          }
      });

      return $(result);
  };
  })( jQuery );

 // Image gallery
 $('.gallery').slick( {
   autoplay: true,
   arrows: false
 });

 var $parent = $(".gallery.slider-parent");
 var $nav = $(".slider-nav").deepest('a');

 $nav.click(function(e){
   e.preventDefault();
   slideIndex = $(this).index();
   $parent.slick('slickGoTo', parseInt(slideIndex) );
 });

我使用控制台检查 $(".slider-nav").deepest('a');，它的位置很好，但 slider 导航仍然不起作用。

更新#2

我尝试了 Christos Lytras 方法来调试并发现哪个不起作用。

我运行 jQuery(".gallery.slider-parent").slick('slickGoTo', 2); 并且它有效。

然后我修改了代码以添加这段代码 console.log("Slide index:", slideIndex, parseInt(slideIndex));。每当我单击导航中的任何图像(幻灯片索引、2、3 或 4)时，它总是打印幻灯片索引:0 0。

所以，问题就在那里，但我该如何解决呢？ javascript $nav 似乎没有在点击时运行，因为 $nav 上的所有 slider 索引都设置为 0，因为它位于不同的列和行中。有什么解决办法吗？

Answer 1

一些调试步骤:

打开控制台选项卡(F12 在 Windows 上)并检查选择器是否为 jQuery(".gallery.slider-parent")返回 slider 。它应该在控制台窗口中打印 slider DOM 对象。

然后尝试通过运行 slick('slickGoTo') 从控制台窗口内更改幻灯片直接:

jQuery(".gallery.slider-parent").slick('slickGoTo', 1);
jQuery(".gallery.slider-parent").slick('slickGoTo', 2);
// etc.

幻灯片应在每次调用时更改，索引不同。

然后尝试调试 $nav onclick事件:

$nav.on('click', (function(e) {
    e.preventDefault();
    slideIndex = $(this).index();

    // This should print the clicked slide index
    console.log("Slide index:", slideIndex, parseInt(slideIndex));

    // And this should print the $parent $parent = $(".gallery.slider-parent") DOM object
    console.log("The $parent is:", $parent);

    $parent.slick('slickGoTo', parseInt(slideIndex));
});

您应该完成每个步骤并获得正确的结果。最好创建一个 fiddle 或代码示例并将其附加到您的问题中。

更新

问题是因为你附上了 <a> $nav在 <div> 内锚定， anchor 索引将始终为 0，因为它将是其父元素的唯一元素。要获取幻灯片索引，请使用 $(this).parent().index()在点击事件函数中是这样的:

$nav.on('click', (function(e) {
    e.preventDefault();
    // Here we get the parent index because the anchor link is the one-and-only child of its' parent
    slideIndex = $(this).parent().index();

    // This should print the clicked slide index
    console.log("Slide index:", slideIndex, parseInt(slideIndex));

    $parent.slick('slickGoTo', parseInt(slideIndex));
});