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

【问题标题】：jQuery slick slider with multiple rows with asNavFor not working properly带有多行的 jQuery 光滑滑块与 asNavFor 无法正常工作
【发布时间】：2021-06-04 11:11:12
【问题描述】：

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

链接到codepen.io

作为代码：

    <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,
    autoplaySpeed:9000,
    speed:700,
    mobileFirst: true,
    slidesToScroll: 1,
    slidesToShow: 4,
    rows: 2,
    swipeToSlide: true,
    infinite: false,
    focusOnSelect: true,
    pauseOnHover:false,
    arrows: false,
    dots: false,
    respondTo:'min',
    asNavFor: '.slider-for',
    cssEase:'linear'
});

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

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

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

【问题讨论】：

标签： javascript jquery slider carousel

【解决方案1】：

我认为这是 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,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 4,
rows: 2,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: false,
dots: false,
respondTo:'min',
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;
});

【讨论】：