html - 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>
非常感谢您的帮助!
解决方案
有几个问题。您在 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>