带有多行的 jQuery 光滑滑块，asNavFor 无法正常工作

如何解决带有多行的 jQuery 光滑滑块，asNavFor 无法正常工作

要创建标准电子商务幻灯片模板，我想要两个滑块，其中包含两个 asNavFor 参数值，用于滑块到滑块。

作为代码：

    <div class="slider">
    <div class="slider-for">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
      <div><h3>7</h3></div>
      <div><h3>8</h3></div>
      <div><h3>9</h3></div>
      <div><h3>10</h3></div>
    </div>
    <div class="slider-nav">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
      <div><h3>5</h3></div>
      <div><h3>6</h3></div>
      <div><h3>7</h3></div>
      <div><h3>8</h3></div>
      <div><h3>9</h3></div>
      <div><h3>10</h3></div>
    </div>
  </div>

使用 CSS：

body {
  background: gray;
}
.slider {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
.slider h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}

.slider .action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.slider .action a {
  display:inline-block;
  padding:5px 10px; 
  background:#f30;
  color:#fff;
  text-decoration:none;
}
.slider .action a:hover{
  background:#000;
}

和JS：

   $('.slider-for').slick({
    autoplay: true,autoplaySpeed:9000,speed:700,mobileFirst: true,slidesToScroll: 1,slidesToShow: 1,rows: 1,fade: true,swipetoSlide: true,infinite: false,focusOnSelect: true,pauSEOnHover:false,arrows: true,dots: false,respondTo:'min',asNavFor: '.slider-nav',cssEase:'linear'
  });

  $('.slider-nav').slick({
    autoplay: false,slidesToShow: 4,rows: 2,arrows: false,asNavFor: '.slider-for',cssEase:'linear'
});

一行的滑块在两行的滑块中更改幻灯片，但是当您单击两行滑块中的任何幻灯片时，您将不会获得您单击的幻灯片编号。

当 $('.slider-nav') 只有一行时可以正常工作，您可以将行：2 更改为行：1 到 $('.slider-nav')。

在$('.slider-for')中点击$('.slider-nav')时如何获得相同的幻灯片？

解决方法

我认为这是 Slick Slider 的一个常见问题：https://github.com/kenwheeler/slick/issues/1206

我想做同样的事情，我想我在那个 github 链接的帮助下找到了一个解决方案

https://jsfiddle.net/sn3b5pcu/

  $('.slider-for').slick({
autoplay: true,autoplaySpeed:9000,speed:700,mobileFirst: true,slidesToScroll: 1,slidesToShow: 1,rows: 1,fade: true,swipeToSlide: true,infinite: false,focusOnSelect: true,pauseOnHover:false,arrows: true,dots: false,respondTo:'min',asNavFor: '.slider-nav',cssEase:'linear'
});
    $('.slider-nav').slick({
autoplay: false,slidesToShow: 4,rows: 2,arrows: false,asNavFor: '.slider-for',cssEase:'linear'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click",function(e){
if( !killit ) {
    e.stopPropagation();
    var idx = $(this).data("thumb");
    $parent.slick("goTo",idx-1);
}
});
$nav
.on("beforeChange",function() {
    killit = true;
}).on("afterChange",function() {
    killit = false;
});