代码之家 › 专栏 › 技术社区 › Ardeus

切片传送带全屏垂直滑动段之间的间隙

slick jquery

Ardeus · 技术社区 · 6 年前

我用的是来自 here 并将其设置为垂直滑动,使用jquery将高度部分设置为全屏。

任何人都知道如果我错过了什么,当我滑到第四张幻灯片和第五张幻灯片时,我可以看到上面的幻灯片背景色,第一、第二、第三张幻灯片没有这个问题。

我不知道代码片段是否可以显示它,我提供 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 回复 | 直到 6 年前

Ardeus 6 年前

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

所以我进一步研究了一下。这里的例子 codepen 运行得很好,但它使用的是slick 1.7,而我使用的是最新的1.9。

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

我又读了一遍为什么这些结构不同,并通过添加 .slick({rows:0}) 在启动期间。所以我现在用这个。 fiddle

user7290573 6 年前

你需要设置 font-size 属性设置为0,因为您看到的间隔是由每个carousel元素之间的空白造成的。 Here's an updated JSFiddle .

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