带有自定义滑块导航的Slick GoTo将无法使用

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>

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

UPDATE

我试图找到关键字以使用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没有在click上运行,因为$ nav上的所有滑块索引都设置为0,因为它位于不同的列和行中.有解决方案吗

Answer 1

调试的一些步骤:

打开控制台选项卡(F12在Windows上)并检查选择器是否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));
});

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

UPDATE

问题在于,因为您将<a> $nav锚点封装在a中<div>,所以锚索引将始终为0,因为它将是其"父"的唯一元素.要获取幻灯片索引,$(this).parent().index()请在click事件函数中使用,如下所示:

$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));
});