Carousel to be autoplayed and looped when final slide reached

Question

I would like to play my Flickity carousel automatically, with 5 seconds of delay for each slide. Then, once it is reached its limit (final slide) it should loop to the first.

How can I achieve that?

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

You can play the carousel automatically by using Flickity's autoPlay option:

autoPlay
Automatically advances to the next cell.

Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off.
Auto-playing will stop when the carousel is clicked or a cell is selected.

autoPlay: true
// advance cells every 3 seconds

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

Auto-playing will pause when the user hovers over the carousel.
Set pauseAutoPlayOnHover: false to disable this behavior.

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

Like this:

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

Below, I've set it to a one second delay for demonstration purposes:

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