到达最后一张幻灯片时，轮播将自动播放并循环播放

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>

View on JSFiddle

Answer 1

您可以使用Flickity's autoPlay option自动播放轮播：

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

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

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>