Как увеличить высоту слайдера Flickity? - PullRequest
Новая
       27

Как увеличить высоту слайдера Flickity?

2 голосов
/ 18 января 2020

Я использую Flickity . У меня есть groupCell true. Теперь проблема в том, что я не могу увеличить высоту изображения или высоту слайдера. Кроме того, мне нужно отобразить слайдер 1 на мобильном устройстве.

Не могли бы вы мне помочь? 

$('.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>

Ответы [ 2 ]

0 голосов
/ 18 января 2020

Flickity имеет опцию setGallerySize, которая устанавливает высоту карусели на высоту самой высокой ячейки. По умолчанию он включается.

Используйте setGallerySize: false, если вы предпочитаете изменять размер карусели на CSS вместо использования размера ячеек. 

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

    /* carousel height */
    .carousel-cell {
      height: SOME HEIGHT;
    }
0 голосов
/ 18 января 2020 
.slidesetImg{
height:100% !important;
}

Надеюсь, это то, что вы ищете.

...