轮播在到达最终幻灯片时自动播放和循环播放

Question

我想自动播放我的 Flickity 轮播，每张幻灯片有 5 秒的延迟。然后，一旦达到其极限(最终幻灯片(，它应该循环到第一个。

我怎样才能做到这一点？

* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.carousel {
background: #EEE;
width: 100%;
}
.carousel img {
display: block;
height: 200px;
}
@media screen and ( min-width: 768px) {
.carousel img {
height: 400px;
}
}
.wrap {
position: relative;
display: inline-block;
}
.wrap span {
font-size: 19px;
position: absolute;
top: 75%;
left: 5%;
right: 5%;
color: white;
text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
}
.wrap p {
font-size: 15px;
position: absolute;
top: 75%;
left: 5%;
right: 5%;
color: white;
text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
}
@media(max-width:480px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:440px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:414px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:384px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:375px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:320px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}

<link href="//cdnjs.cloudflare.com/ajax/libs/flickity/2.1.2/flickity.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/2.1.2/flickity.pkgd.min.js"></script>
<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false }'>
<div class="wrap">
<img src="https://i.pinimg.com/736x/3a/a9/85/3aa985caf713b279f1ff73424e2a3d33--summer-landscape-landscape-photographers.jpg" alt="orange tree" />
<span>Mirissa Beach</span>
</div>
<div class="wrap">
<img src="http://www.passenger6a.fr/wp-content/uploads/2016/09/srilankaportada-4-1200x600.jpg" alt="orange tree" />
<span>Stilt Fishing</span>
</div>
<div class="wrap">
<img src="https://www.trafalgar.com/~/media/images/website-refresh/hero/wondersofsrilanka-hero-585510302.jpg?mw=1200&" alt="submerged" />
<span>Hill Country</span>
</div>
<div class="wrap">
<img src="https://www.romanticbug.com/wp-content/uploads/2015/09/ella-sri-lanka.jpg" alt="look-out" />
<span>Train Rides</span>
</div>
<div class="wrap">
<img src="https://www.slguardian.org/wp-content/uploads/2016/12/Srilanka_Politics_Culture.jpg" alt="One World Trade" />
<span>Kandy</span>
</div>
<div class="wrap">
<img src="https://beachbride.co.uk/wp-content/uploads/2017/05/destination_sri_lanka_resorts.jpg" alt="drizzle" />
<span>Southern Beach</span>
</div>
<div class="wrap">
<img src="https://www.awimaway.com/Content/uploads/tours/ASSL103_5_5.jpg" alt="cat nose" />
<span>Dambulla cave temple</span>
</div>
</div>

在 JSFiddle 上查看

Answer 1

您可以使用Flickity的autoPlay选项自动播放轮播：

自动

播放
自动前进到下一个单元格。

鼠标悬停时自动播放将暂停，鼠标悬停关闭时恢复自动播放。单击轮播或选择单元格时，自动播放将停止。

autoPlay: true
// advance cells every 3 seconds
autoPlay: 1500 // {Number}
// advance cells ever {Number} milliseconds
// 1500 will advance cells every 1.5 seconds

当用户将鼠标悬停在轮播界面上时，自动播放将暂停。
设置pauseAutoPlayOnHover: false以禁用此行为。

autoPlay: 1500,
pauseAutoPlayOnHover: false
// auto play continues when user hovers over carousel

像这样：

data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay":5000 }'

下面，出于演示目的，我将其设置为一秒延迟：

* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.carousel {
background: #EEE;
width: 100%;
}
.carousel img {
display: block;
height: 200px;
}
@media screen and ( min-width: 768px) {
.carousel img {
height: 400px;
}
}
.wrap {
position: relative;
display: inline-block;
}
.wrap span {
font-size: 19px;
position: absolute;
top: 75%;
left: 5%;
right: 5%;
color: white;
text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
}
.wrap p {
font-size: 15px;
position: absolute;
top: 75%;
left: 5%;
right: 5%;
color: white;
text-shadow: -1px -1px 0 #000, 0px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 1px 0 #000, 1px 1px 0 #000;
}
@media(max-width:480px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:440px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:414px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:384px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:375px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}
@media(max-width:320px) {
.wrap p {
display: none;
}
.wrap span {
left: 15%;
right: 5%;
}
}

<link href="//cdnjs.cloudflare.com/ajax/libs/flickity/2.1.2/flickity.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/2.1.2/flickity.pkgd.min.js"></script>
<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay":1000 }'>
<div class="wrap">
<img src="https://i.pinimg.com/736x/3a/a9/85/3aa985caf713b279f1ff73424e2a3d33--summer-landscape-landscape-photographers.jpg" alt="orange tree" />
<span>Mirissa Beach</span>
</div>
<div class="wrap">
<img src="http://www.passenger6a.fr/wp-content/uploads/2016/09/srilankaportada-4-1200x600.jpg" alt="orange tree" />
<span>Stilt Fishing</span>
</div>
<div class="wrap">
<img src="https://www.trafalgar.com/~/media/images/website-refresh/hero/wondersofsrilanka-hero-585510302.jpg?mw=1200&" alt="submerged" />
<span>Hill Country</span>
</div>
<div class="wrap">
<img src="https://www.romanticbug.com/wp-content/uploads/2015/09/ella-sri-lanka.jpg" alt="look-out" />
<span>Train Rides</span>
</div>
<div class="wrap">
<img src="https://www.slguardian.org/wp-content/uploads/2016/12/Srilanka_Politics_Culture.jpg" alt="One World Trade" />
<span>Kandy</span>
</div>
<div class="wrap">
<img src="https://beachbride.co.uk/wp-content/uploads/2017/05/destination_sri_lanka_resorts.jpg" alt="drizzle" />
<span>Southern Beach</span>
</div>
<div class="wrap">
<img src="https://www.awimaway.com/Content/uploads/tours/ASSL103_5_5.jpg" alt="cat nose" />
<span>Dambulla cave temple</span>
</div>
</div>