光滑旋转木马在不同位置不同“slidesToShow”

如何解决光滑旋转木马在不同位置不同“slidesToShow”

我希望有一个slick carousel，其中，在一些位置，它示出了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",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");},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张幻灯片，或一个大的一个。我已经加入按钮来显示它的有用和无用的行为。
所以一般情况下，我的问题是：

“如何可以具有slick carousel，具有不同的位置示出幻灯片的一个不同数量？的”

也许有什么东西从我上面说的作品尝试完全不同的，这只是我的尝试。
感谢您的任何反馈！

解决方法

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

继续我在问题中的尝试，我有一个带有 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",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");},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>

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

$(".carousel").slick({
  // IMPORTANT
  variableWidth: true,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",true);
    },1);
  } else if ((nextSlide==2 || nextSlide==3) && (currentSlide==4)) {
    $(".carousel").slick("slickSetOption",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>