html - 如何增加Flickity slider 的高度？

Question

我正在使用Flickity 。我有 groupCell tr​​ue。现在的问题是，我无法增加图像的高度或 slider 的高度。 另外，我必须在移动设备中显示 1 个 slider 。

你能帮我一下吗？

$('.slideset').flickity({
  // options
  cellAlign: 'left',
  wrapAround: true,
  contain: true,
  //groupCells:'%',
  groupCells: true,
  prevNextButtons: true
});

.carousel-cell {
  width: calc( ( 100% - 10px) / 3);
  height: 400px;
  margin-right: 10px;
  border-radius: 5px;
  background-color: #f00;
  counter-increment: carousel-cell;
}

.slidesetImg img {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
  padding: 5px;
  object-fit: cover;
}
@media ( min-width: 768px ) {
  .carousel-cell {
/* 1 cells in group */
width: calc( ( 100% - 20px ) / 1);
  } 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<section>
  <div class="container">
    <div class="wrapper">

      <div class="main-carousel slideset">
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>

        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>
        <div class="carousel-cell">
          <div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
        </div>

      </div>


    </div>
  </div>

</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Answer 1

Flickity 具有选项 setGallerySize，它将轮播的高度设置为最高单元格的高度。默认情况下启用。

如果您更喜欢使用 CSS 来调整轮播的大小，而不是使用单元格的大小，请使用 setGallerySize: false。

$('.slideset').flickity({
  // options
  setGallerySize: false
  cellAlign: 'left',
  wrapAround: true,
  contain: true,
  //groupCells:'%',
  groupCells: true,
  prevNextButtons: true
});

    /* carousel height */
    .carousel-cell {
      height: SOME HEIGHT;
    }