Autoplay

autoplay() advances the slider every 3 s. Hover to pause, move the mouse away to resume.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>
.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }
.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 500,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    autoplay({ delay: 3000, pauseOnHover: true }),
  ],
})

Autoplay — progress bar

Combine autoplay with pagination type:'progress' to show a visual countdown between slides.

1
2
3
4
5
View code 
<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>
.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }
.sliderkit__pagination-progress { height: 4px; background: rgba(255,255,255,0.3); }
.sliderkit__pagination-progress-fill { background: #fff; transition: width 2800ms linear; }
.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }
.sliderkit__pagination-progress { height: 4px; background: rgba(255,255,255,0.3); }
.sliderkit__pagination-progress-fill { background: #fff; transition: width 2800ms linear; }
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 500,
  plugins: [
    arrows(),
    pagination({ type: 'progress' }),
    autoplay({ delay: 3000, pauseOnHover: true }),
  ],
})