我有一个 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>
非常感谢您的帮助!