Изображение карусели Flickity не отображается

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

Это мой 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>

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


carousel html layout css flickity
person Marco    schedule 09.05.2018    source источник
comment
не могли бы вы создать ручку или jsfiddle, чтобы мы могли проверить, что происходит.   -  person Chilll007    schedule 09.05.2018
comment
Я добавил фрагмент, и это действительно странно, потому что там он отлично работает. Это ссылка на сайт www.mariaghetti.eu и карусель в работе -› жители брюсселя   -  person Marco    schedule 09.05.2018

Ответы (1)


arrow_upward
1
arrow_downward

Есть несколько проблем. Вы загружаете 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>

Кроме того, вы дважды загружаете Flickity CSS и ненужный скрипт 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>
person Macsupport    schedule 09.05.2018
comment
Большое спасибо за вашу помощь, но, к сожалению, проблема все еще существует. Это странно, потому что я понял, что после того, как я изменил размер страницы (и вернул ее в нормальное состояние), карусель работает правильно. - person Marco; 11.05.2018
comment
Там все еще есть ошибка с flickity-docs.min.js. Это не часть Flickity, и мне интересно, почему вы его используете? Как я предложил в своем ответе, вы должны удалить его и посмотреть, работает ли ваша карусель. - person Macsupport; 12.05.2018