javascript - 在不同位置具有不同“slidesToShow”的光滑轮播

Question

我想要一个光滑的轮播，在某些位置，它显示 3 张幻灯片，而在其他位置，它显示 1 张幻灯片。这是我尝试过的东西：

$(".carousel").slick({
  // IMPORTANT
  variableWidth: true,
  // not so important
  dots: true,
  appendArrows: $(".carousel-arrows"),
  nextArrow: "<button>Next</button>",
  prevArrow: "<button>Previous</button>"
});

$(".wanted-behavior").click(function() {
  $(".carousel").slick("slickGoTo", 0, true);
  setTimeout(function() {$(".carousel").slick("slickPrev");}, 500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 2000)
});
$(".unwanted-behavior").click(function() {
  $(".carousel").slick("slickGoTo", 1, true);
  setTimeout(function() {$(".carousel").slick("slickNext");}, 500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 1500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 2500)
  setTimeout(function() {$(".carousel").slick("slickPrev");}, 4000)
});

/* IMPORTANT */
.carousel-img {
  width: 33vw!important;
}
.carousel-img-big {
  width: 100vw!important;
}

/* not so important */
.carousel-img img,
.carousel-img-big img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="carousel-arrows"></div>
<div class="carousel">
  <div class="carousel-img"><img src="https://picsum.photos/200"></div>
  <div class="carousel-img"><img src="https://picsum.photos/201"></div>
  <div class="carousel-img"><img src="https://picsum.photos/202"></div>
  <div class="carousel-img"><img src="https://picsum.photos/203"></div>
  <div class="carousel-img-big"><img src="https://picsum.photos/204"></div>
</div>

<button class="wanted-behavior" type="button">Wanted Behaviour</button>
<button class="unwanted-behavior" type="button">Unwanted Behaviour</button>

这只是使用variableWidth光滑轮播的选项，其中幻灯片设置为33vw，一个设置为100vw。
问题在于，轮播的一些位置只显示了大 ( 100vw) 幻灯片的一小部分，这是我不想要的。屏幕上应该有 3 张幻灯片或一张大幻灯片。我添加了按钮来显示它想要的和不需要的行为。
所以一般来说，我的问题是：

“我怎样才能有一个光滑的轮播，不同的位置显示不同数量的幻灯片？ ”

也许有一些与我在上面尝试过的完全不同的东西，这正是我尝试过的。
感谢您的任何反馈！

标签： javascriptjquerycssslick.js

Answer 1

我是这个问题的创造者......我实际上已经找到了答案，我只是觉得对于我正在尝试做的简单事情来说过于复杂，我相信有更好的方法。但由于这篇文章没有太多活动，我还是会给出答案（尽管我不会接受）。

继续我在问题中尝试的内容，我有一个带有variableWidth选项的光滑轮播，并且幻灯片占用了33vw，除了一个占用100vw.

$(".carousel").slick({
  // IMPORTANT
  variableWidth: true,
  // not so important
  dots: true,
  appendArrows: $(".carousel-arrows"),
  nextArrow: "<button>Next</button>",
  prevArrow: "<button>Previous</button>"
});

$(".wanted-behavior").click(function() {
  $(".carousel").slick("slickGoTo", 0, true);
  setTimeout(function() {$(".carousel").slick("slickPrev");}, 500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 2000)
});
$(".unwanted-behavior").click(function() {
  $(".carousel").slick("slickGoTo", 1, true);
  setTimeout(function() {$(".carousel").slick("slickNext");}, 500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 1500)
  setTimeout(function() {$(".carousel").slick("slickNext");}, 2500)
  setTimeout(function() {$(".carousel").slick("slickPrev");}, 4000)
});

/* IMPORTANT */
.carousel-img {
  width: 33vw!important;
}
.carousel-img-big {
  width: 100vw!important;
}

/* not so important */
.carousel-img img,
.carousel-img-big img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="carousel-arrows"></div>
<div class="carousel">
  <div class="carousel-img"><img src="https://picsum.photos/200"></div>
  <div class="carousel-img"><img src="https://picsum.photos/201"></div>
  <div class="carousel-img"><img src="https://picsum.photos/202"></div>
  <div class="carousel-img"><img src="https://picsum.photos/203"></div>
  <div class="carousel-img-big"><img src="https://picsum.photos/204"></div>
</div>

<button class="wanted-behavior" type="button">Wanted Behaviour</button>
<button class="unwanted-behavior" type="button">Unwanted Behaviour</button>

然后我添加的是一个检查，每次在幻灯片更改之前，都会询问它想要转到的幻灯片是否是“坏位置”，如果是，它会跳过“坏位置”到下一个“好位置” ”。最后，如果启用了轮播dots，我们需要删除“坏位置”对应的点，所以我们也这样做。结果是：

$(".carousel").slick({
  // IMPORTANT
  variableWidth: true,
  // not so important
  dots: true,
  appendArrows: $(".carousel-arrows"),
  nextArrow: "<button>Next</button>",
  prevArrow: "<button>Previous</button>"
});

// IMPORTANT

$($(".carousel .slick-dots").children().get().slice(2, 4)).css("display", "none");

$(".carousel").on('beforeChange', function(event, slick, currentSlide, nextSlide){
  if ((nextSlide==2 || nextSlide==3) && (currentSlide!=4)) {
    $(".carousel").slick("slickSetOption", "waitForAnimate", false)
    setTimeout(function() {
      $(".carousel").slick("slickGoTo", 4, false);
      $(".carousel").slick("slickSetOption", "waitForAnimate", true);
    }, 1);
  } else if ((nextSlide==2 || nextSlide==3) && (currentSlide==4)) {
    $(".carousel").slick("slickSetOption", "waitForAnimate", false)
    setTimeout(function() {
      $(".carousel").slick("slickGoTo", 1, false);
      $(".carousel").slick("slickSetOption", "waitForAnimate", true);
    }, 1);
  };
});

/* IMPORTANT */
.carousel-img {
  width: 33vw!important;
}
.carousel-img-big {
  width: 100vw!important;
}

/* not so important */
.carousel-img img,
.carousel-img-big img {
  width: 100%;
  object-fit: cover;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

<div class="carousel-arrows"></div>
<div class="carousel">
  <div class="carousel-img"><img src="https://picsum.photos/200"></div>
  <div class="carousel-img"><img src="https://picsum.photos/201"></div>
  <div class="carousel-img"><img src="https://picsum.photos/202"></div>
  <div class="carousel-img"><img src="https://picsum.photos/203"></div>
  <div class="carousel-img-big"><img src="https://picsum.photos/204"></div>
</div>