javascript - 如何使用光滑的 slider 显示全屏背景图像 slider ？

Question

我正在使用 slick-slider( http://kenwheeler.github.io/slick/ )。我必须显示带有背景图像的 slider ，但图像不显示。我必须在全屏上显示图像。另外，如何使用 slideUp 动画？我应该使用内嵌背景图像吗？

你能帮我解决这个问题吗？

$('.slider').slick({
  slidesToShow: 1,
  // autoplay: true,
  //autoplaySpeed: 5000,
  dots: true,
  infinite: true,
  speed: 300,
  fade: true,
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.slick-slider {
  height: 100%;
}

.slide1 {
  background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg')
}

.slide2 {
  background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg')
}

.slider {
  width: 100%;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.a-slide {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider">
  <div class="a-slide slide1"></div>
  <div class="a-slide slide2"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript"></script>

Answer 1

您需要为 slider 中的所有内部 div 定义高度。

$('.slider').slick({
  slidesToShow: 1,
  // autoplay: true,
  //autoplaySpeed: 5000,
  dots: true,
  infinite: true,
  speed: 300,
  vertical: true
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.slick-slider {
  height: 100%;
}
.slider div {
  height: 100% !important; /* added this */
}

.slide1 {
  background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg'); 
}

.slide2 {
  background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg');   
}

.slider {
  width: 100%;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.a-slide {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider">
  <div class="a-slide slide1"></div>
  <div class="a-slide slide2"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript"></script>