Flickity карусель изображение не показывает - PullRequest
Новая
       56

Flickity карусель изображение не показывает

0 голосов
/ 09 мая 2018

У меня есть карусель Flickity, в которой задан и работает Everythign, за исключением того, что он показывает только последние фотографии, которые у меня есть, и повторяет их над остальными (как будто он поверх них). Я не понимаю почему.

Это мой HTML: 

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
   </div>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
   </div>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
   </div>
</div>

И CSS: 

.main-carousel {
  width: 90%;
  align-items: center;
  margin-top: 1%;
  margin-left: 5%;
  height: 420px;
}

.carousel-cell {
  width: 100%; /* full width */
  padding-left: 10px;
  height: 400px;
  background: #fff;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .carousel-cell img {
  display: block;
  max-height: 100%;
 }

Большое спасибо за помощь! 

.main-carousel {
  width: 90%;
  align-items: center;
  margin-top: 1%;
  margin-left: 5%;
  height: 420px;
}

.carousel-cell {
  width: 100%; /* full width */
  padding-left: 10px;
  height: 400px;
  background: #fff;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-cell img {
  display: block;
  max-height: 100%;
}
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
                      </div>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
                      </div>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
                      </div>
                    </div>

Большое спасибо за помощь!

1 Ответ

0 голосов
/ 09 мая 2018

Есть несколько вопросов. Вы загружаете Flickity перед загрузкой jQuery:

В заголовке вашего документа у вас есть: 

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="css/flickity.css" media="screen">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="js/flickity-docs.min.js"></script>

и в конце вашей страницы у вас есть: 

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="index.js"></script>

Также вы дважды загружаете CSS flickity и ненужный скрипт flickity-docs.min.js . Этот скрипт предназначен только для документов с веб-страницы flickity и не нужен для слайдера, и он выдает ошибку.

Попробуйте это: Поместите это в заголовок вашей страницы: 

  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

и ваши сценарии внизу: 

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="index.js"></script>
...