Увеличить высоту карусели в материализованном css

У меня есть следующий фрагмент кода из моего html-шаблона, где я использовал карусель из материализованного css. Карусель застряла на высоте по умолчанию 400px. Я попытался увеличить его высоту с помощью css:

.carousel{
        min-height: 550px;
 }

Приведенный выше код действительно работает над увеличением высоты ползунка. Но когда я меняю разрешение экрана на мобильное изображение, под каруселью появляется лишнее пустое пространство, выталкивая содержимое ниже. Дальнейшее изменение разрешения экрана обратно в режим рабочего стола, высота слайдера достигает 760 пикселей.

Я был бы очень благодарен, если бы кто-нибудь мог предложить способ решения этой проблемы.

$('.carousel').carousel({
  fullWidth: true
});
.carousel{
min-height:550px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="carousel carousel-slider center" data-indicators="true">

  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?food" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?cat" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?corgi" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?retriver" alt="">
  </div>
</div>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo odit inventore placeat, laboriosam qui expedita quibusdam, voluptas quia numquam provident nam rem quam hic eum repudiandae quisquam quod totam autem consequatur officiis possimus quasi iusto aut. Dignissimos eos recusandae veniam eius cupiditate consectetur suscipit explicabo tenetur tempore quod ea, at consequuntur sit laudantium qui minus laborum laboriosam quo in odit illum veritatis ducimus. Reiciendis modi quos, laborum aliquam autem quia soluta molestiae! Unde vero labore fuga numquam incidunt voluptates mollitia sit dolores possimus dolorum. Iusto aspernatur odit sint dolore. Magnam consequuntur perferendis expedita? Quidem inventore officiis alias, amet ex porro voluptatem sapiente quasi, sed vitae, aspernatur, odio nulla totam corrupti. Alias repellat, eligendi inventore rem, omnis laudantium nobis qui ab esse corrupti quibusdam ex porro debitis? Optio a modi quas esse neque autem natus consectetur, mollitia nostrum ut vel velit at ex, ipsam necessitatibus? Incidunt deserunt expedita commodi pariatur adipisci recusandae iusto, odio impedit magnam ipsum, ut earum quis a veritatis facere blanditiis magni est ullam unde. Quibusdam similique porro quae dolores quidem ipsa distinctio incidunt est enim, optio laboriosam maiores non itaque praesentium hic nam consequuntur a iste quas velit deserunt eum, possimus facere quasi. Soluta, incidunt cum.   

</div>
0
0
119
1

Ответы 1

Вам нужно установить min-height: auto в класс .carousel:

$('.carousel').carousel({
  fullWidth: true
});
.carousel {
  min-height: 550px
}

@media only screen and (max-width: 991px) {
  .carousel {
    min-height: auto
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="carousel carousel-slider center" data-indicators="true">

  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?food" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?cat" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?corgi" alt="">
  </div>
  <div class="carousel-item">
    <img src="https://source.unsplash.com/1024x512/?retriver" alt="">
  </div>
</div>
<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo odit inventore placeat, laboriosam qui expedita quibusdam, voluptas quia numquam provident nam rem quam hic eum repudiandae quisquam quod totam autem consequatur officiis possimus
  quasi iusto aut. Dignissimos eos recusandae veniam eius cupiditate consectetur suscipit explicabo tenetur tempore quod ea, at consequuntur sit laudantium qui minus laborum laboriosam quo in odit illum veritatis ducimus. Reiciendis modi quos, laborum
  aliquam autem quia soluta molestiae! Unde vero labore fuga numquam incidunt voluptates mollitia sit dolores possimus dolorum. Iusto aspernatur odit sint dolore. Magnam consequuntur perferendis expedita? Quidem inventore officiis alias, amet ex porro
  voluptatem sapiente quasi, sed vitae, aspernatur, odio nulla totam corrupti. Alias repellat, eligendi inventore rem, omnis laudantium nobis qui ab esse corrupti quibusdam ex porro debitis? Optio a modi quas esse neque autem natus consectetur, mollitia
  nostrum ut vel velit at ex, ipsam necessitatibus? Incidunt deserunt expedita commodi pariatur adipisci recusandae iusto, odio impedit magnam ipsum, ut earum quis a veritatis facere blanditiis magni est ullam unde. Quibusdam similique porro quae dolores
  quidem ipsa distinctio incidunt est enim, optio laboriosam maiores non itaque praesentium hic nam consequuntur a iste quas velit deserunt eum, possimus facere quasi. Soluta, incidunt cum.

</div>

Спасибо за предложение, но это не сработало. Применение вашего предложения 1. высота слайдера остается 400 пикселей,2. При изменении разрешения экрана обратно в режим рабочего стола с мобильного, высота слайдера достигает 760 пикселей.3.Белое пространство под слайдером в мобильной версии удалено.

Kajol Rauniyar 26.10.2018 07:02

Спасибо за ваше предложение, но это не сработало. Применение вашего предложения 1. Высота ползунка будет исправлена. 2. Я хочу, чтобы оба режима были мобильными и настольными. Обе высоты будут одинаковыми, когда это настольный режим, высота будет увеличиваться, но когда я перешел в мобильный режим, высота будет уменьшаться. пожалуйста, дайте мне несколько предложений

Kajol Rauniyar 26.10.2018 07:44

Другие вопросы по теме