slick.js 图片滑块使图片垂直居中

Question

我有一个非常基本的 slick.js 图像滑块。我设法将包装内的图像水平居中，但我不能垂直居中。它适用于桌面视图，但当我在移动视图上尝试时，站立图片完美地保持在中心，但躺着的图片留在页面顶部。我想让躺着的图片垂直到中间

我的代码：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gallery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/slick.css" />
    <link rel="stylesheet" href="./css/galleryStyle.css" />
  </head>
  <body>
    <div class="banner-slider-wrapper">
      <div class="banner-slider">
        <div><img src="./img/20200704-DSC03331.jpg" alt="" /></div>
        <div><img src="./img/20200704-DSC03906.jpg" alt="" /></div>
        <div><img src="./img/zsofiéspisti_kreativ-09715.jpg" alt="" /></div>
      </div>
      <script src="./js/slick.js"></script>
    </div>
    <script>
      $('.banner-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        infinite: true,
        //tosolve
        arrows: false,
      });
    </script>
  </body>
</html>

galleryStyle.css:

body {
  padding: 0;
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 70%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  top: 50%;
}

.banner-slider {
  top: 50%;
  vertical-align: middle;
}

.banner-slider .slick-prev {
  position: absolute;
  left: 30px;
  top: 100%;
}
.banner-slider .slick-next {
  position: absolute;
  right: 30px;
  top: 100%;
}

.banner-slider-wrapper {
  /* background-image: url('../img/gallery-background.jpeg'); */
  background: white;
  max-height: 1000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 100px;
}

Answer 1

您可以使用 css flex 对齐滑块中的图像

$('.banner-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  infinite: true,
  arrows: false
});

body {
  padding: 0;
  margin: 0;
  height: 100%;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 70%;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  top: 50%;
}

.banner-slider {
  top: 50%;
  vertical-align: middle;  
}

.banner-slider .slick-prev {
  position: absolute;
  left: 30px;
  top: 100%;
}
.banner-slider .slick-next {
  position: absolute;
  right: 30px;
  top: 100%;
}

.banner-slider-wrapper {
  /* background-image: url('../img/gallery-background.jpeg'); */
  background: #cda;
  max-height: 1000px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 10px;
}
.slick-slide:focus{
  outline: none;
}

/*solution*/
.banner-slider .slick-track{
  display: flex;
  align-items: center;
}

<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="banner-slider-wrapper">
  <div class="banner-slider">
    <div><img src="https://picsum.photos/200/350"></div>
    <div><img src="https://picsum.photos/200"></div>
    <div><img src="https://picsum.photos/300/100"></div>
  </div>
</div>

slick.js 图片滑块使图片垂直居中

slick.js Image slider center images vertically

html

css

slick.js