Question

我创建了一个带有自定义滑块导航的滑块。代码如下：

<!-- 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 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>

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

更新

我试图找到关键字以使用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');它位置不错，但滑块导航仍无法正常工作。

更新＃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上的所有滑块索引都设置为0，因为它位于不同的列和行中。任何解决方案？

Answer 1

调试的一些步骤：

打开控制台选项卡（Windows上为 F12 ）并检查选择器jQuery(".gallery.slider-parent")是否返回滑块。它应该在控制台窗口打印滑块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));
});

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

<强>更新

问题在于，因为您将<a> $nav锚点放在<div>内，所以锚点索引将始终为0，因为它将是其“父”的唯一元素。要获取幻灯片索引，请在click事件函数中使用$(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));
});

带有自定义滑块导航的Slick GoTo无法正常工作

1 个答案:

调试的一些步骤：