Flickity 轮播图像不显示

Question

我有一个 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>

非常感谢您的帮助！

Answer 1

有几个问题。您在 jQuery 加载之前加载 Flickity：

在文档的开头，您有：

<!-- 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>