光滑轮播全屏垂直滑动部分之间的间隙

时间:2018-07-20 12:14:14

标签: jquery slick

我正在使用here中的光滑轮播,并将其设置为垂直幻灯片,并使用jquery将高度部分设置为全屏显示。

任何人都知道我是否丢失了某些东西,当我滑动到第4张幻灯片和第5张幻灯片时,我可以在顶部看到以前的幻灯片背景颜色,而第1、2、3rd没有这个问题。

我不知道代码片段是否可以显示它,我在此处提供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>

2 个答案:

答案 0 :(得分:1)

使用font-size:0来自@ user7290573的答案也可以,但是引用的文章说它在android中也可能有问题。

因此,我进一步研究了一些内容。实际上,这里codepen的示例运行得很好,但是它使用的是slick 1.7,而我使用的是最新的1.9。

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

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

答案 1 :(得分:0)

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

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