Карусель для автоматического воспроизведения и зацикливания при достижении последнего слайда - PullRequest
Новая
       10

Карусель для автоматического воспроизведения и зацикливания при достижении последнего слайда

0 голосов
/ 05 октября 2018

Я бы хотел сыграть мою 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

1 Ответ

0 голосов
/ 05 октября 2018

Вы можете воспроизвести карусель автоматически, используя опцию Flickity autoPlay :

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>
...