日本語

Autoplay

You're browsing the documentation for v3

Progress Bar

  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06

To display the progress bar, provide the following HTML. Make sure that the progress element must be a child of the root or the slider element.

<div class="splide">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>


  <div class="splide__progress">
		<div class="splide__progress__bar">
		</div>
  </div>
</div>
HTML

If you are using splide-core.min.css, you have to style the bar to make it visible:

.splide__progress__bar {
  height: 3px;
  background: #ccc;
}
CSS

By default, Splide rewinds the progress once it's interrupted. You can keep the elapsed time by setting the resetProgress option to false.

Overriding Interval

The interval option uniformly defines the autoplay interval, but you can override it on specific slides by the data-splide-interval attribute:

<li class="splide__slide" data-splide-interval="1000"></li>
<li class="splide__slide" data-splide-interval="10000"></li>
HTML

Progress Rate

The autoplay:playing lets you know the current progress rate.

var splide = new Splide( '.splide' );


splide.on( 'autoplay:playing', function ( rate ) {
  console.log( rate ); // 0-1
} );


splide.mount();
JavaScript

Play/Pause Buttons

To add play/pause buttons, provide the following HTML.

<div class="splide">
  <div class="splide__slider">
		<div class="splide__track">
			<ul class="splide__list">
				<li class="splide__slide">Slide 01</li>
				<li class="splide__slide">Slide 02</li>
				<li class="splide__slide">Slide 03</li>
			</ul>
		</div>
  </div>


  <div class="splide__autoplay">
		<button class="splide__play">Play</button>
		<button class="splide__pause">Pause</button>
  </div>
</div>
HTML

The autoplay element also have to be a child of the root or the slider element.

The pauseOnHover option should be false if the slider has a pause button since autoplay will stop before the user clicks the button.

Viewport

You can start autoplay only when the slider is in the viewport by using Intersection extension.