Сова карусели в полный рост дает пустую страницу - PullRequest
Новая
       19

Сова карусели в полный рост дает пустую страницу

0 голосов
/ 25 июня 2019

Следующий фрагмент взят из моего текущего проекта, в котором я пытаюсь реализовать совую карусель 2.

Но следующий код дает пустую белую страницу.Это происходит после того, как я добавляю js-код инициализации карусели сов.

Перед тем, как добавить скрипт, тексты и изображения находятся на своем месте.Также консоль не показывает ошибок.Я не уверен, что мне здесь не хватает?Пожалуйста, предложите.Ниже мой код: 

$('.banner').owlCarousel({
  loop: true,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      nav: false,
      loop: true,
    },
    600: {
      items: 1,
      nav: false,
      loop: true,
    },
    1000: {
      items: 1,
      nav: false,
      loop: true,
    }
  }
})
.banner-item {
  position: relative;
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.banner-data {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.banner-data h1 {
  color: #fff;
}

.banner-data p {
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" rel="stylesheet" />


<div class="banner">

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?beer)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?food)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?dog)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>


</div>

1 Ответ

0 голосов
/ 25 июня 2019

Добавить owl-carousel класс на содержащий div.Это баннер класс в вашем случае.

...