Question

我有一个Flickity旋转木马，其中每个标志都已设置并正常工作，除了它只显示我拥有的最后一张图片并将其重复在其他图片上（就好像它在它们之上）。我不明白为什么。

这是我的HTML：

<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(this.props.book.imageLinks.thumbnail) ? this.props.book.imageLinks.thumbnail : ""})`}}></div>

和CSS：

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

非常感谢你的帮助！

.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%;
}

非常感谢你的帮助！

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>

Flickity轮播图像不显示

1 个答案: