Slick Carousel 全屏垂直滑动部分之间的间隙

Question

我正在使用 here 的 slick carousel 并将其设置为垂直滑动并使用 jquery 将高度部分设置为全屏。

任何人都知道我是否遗漏了什么，当我滑动到第 4 张幻灯片和第 5 张幻灯片时，我可以在顶部看到上一张幻灯片的背景颜色，而第 1、2、3 张没有这个问题。

不知道代码片段能不能显示出来，我这里提供fiddle。谢谢。

initFullSlide();

function initFullSlide() {
  var $fullSlide = $("#full-slide");
  var $sections = $(".section");
  $sections.css({ height: $(window).height() - 60 });
  var slickIsChanging = false;
  var slideIndex = 0;
  var slideCount = $(".section").length;

  function mouseWheel($slider) {
    $fullSlide.on(
      "mousewheel DOMMouseScroll wheel MozMousePixelScroll",
      {
        $slider: $slider
      },
      mouseWheelHandler
    );
  }

  function mouseWheelHandler(event) {
    // console.log("wheel");
    event.preventDefault();
    event.stopPropagation();

    var $slideContainer = $(this);
    if (!$slideContainer.hasClass("animating") && slickIsChanging == false) {
      $slideContainer.addClass("animating");
      var $slider = event.data.$slider;
      var delta = event.originalEvent.deltaY;
      if (delta > 0) {
        $slider.slick("slickNext");
        
      } else {
        $slider.slick("slickPrev");
        
      }

      setTimeout(function() {
        $slideContainer.removeClass("animating");
      }, 1000);
    }
  }

  $fullSlide
    .on("init", function() {
      //slick slider callback must be defined before creating slick object
      // console.log("init");
      mouseWheel($fullSlide);
    })
    .on("beforeChange", function(event, slick, currentSlide, nextSlide) {
      //console.log("change start");
      slickIsChanging = true;
    })
    .on("afterChange", function(event, slick, currentSlide) {
      //console.log("change done");
      slickIsChanging = false;
    })
    .slick({
      prevArrow: false,
      nextArrow: false,
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: false,
      vertical: true,
      verticalSwiping: true,
      draggable: true,
      dots: false,
      placeholders:false
      // variableWidth:true,
    });
}

body {
  overflow: hidden;
}
#full-slide.slick-vertical .slick-slide {
  border: none;
}
.slick-vertical .slick-slide {
  border: none;
}
.slick-slide:nth-child(1) {
  background-color: #1dcde4;
}
.slick-slide:nth-child(2) {
  background-color: #d17205;
}
.slick-slide:nth-child(3) {
  background-color: #1305d1;
}
.slick-slide:nth-child(4) {
  background-color: #ced105;
}
.slick-slide:nth-child(5) {
  background-color: #d10505;
}
.section {
  width: 100%;
}
.section img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<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"></script>
<div id="full-slide">
        <div class="section">
            Text here
            <img src="http://placehold.it/1190x334/d8d8d8/787878?text=img">
        </div>
        <div class="section">
            Second text
            <img src="http://placehold.it/1190x334/d8d8d8/787878?text=img2">
        </div>
        <div class="section">
            <img src="http://placehold.it/1190x334/d8d8d8/787878?text=img3">
        </div>
        <div class="section">
            <img src="http://placehold.it/1190x334/d8d8d8/787878?text=img4">
        </div>
        <div class="section">
            <img src="http://placehold.it/1190x334/d8d8d8/787878?text=img5">
        </div>
    </div>

Answer 1

您需要将父容器的 font-size 属性设置为 0，因为您看到的间隙是由每个轮播元素之间的空格引起的。 Here's an updated JSFiddle.

Here's some more information on the whitespace "bug".

Answer 2

@user7290573 使用 font-size:0 的回答也有效，但引用的文章说它在 android 中也可能有问题。

所以我进一步研究了一下。实际上这里的示例 codepen 运行很好，但它使用的是 slick 1.7，而我使用的是最新的 1.9。

我看到那些子 div 结构在版本之间是不同的。所以添加 .section{display:block !important;} 也可以。

我又进一步阅读了为什么这些结构不同，并通过在启动过程中添加 .slick({rows:0}) 找到了解决方案。所以我现在正在使用它。 fiddle

Slick Carousel 全屏垂直滑动部分之间的间隙

Slick Carousel full screen vertical slide gap between section

jquery

slick.js