Vertical slider

Set axis:"vertical" for a top-to-bottom slider. Give the container a fixed height. Swipe up/down or use the arrows.

1
2
3
4
5
View code 
<div id="my-slider" style="height:300px">
  <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>
#my-slider { height: 300px; }
.demo-slide { height: 300px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

/* vertical arrows: top / bottom instead of left / right */
.sliderkit__arrow {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { top: 8px; }
.sliderkit__arrow--next { bottom: 8px; }
#my-slider { height: 300px; }
.demo-slide { height: 300px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

/* vertical arrows: top / bottom instead of left / right */
.sliderkit__arrow {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { top: 8px; }
.sliderkit__arrow--next { bottom: 8px; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  axis: 'vertical',
  loop: true,
  speed: 300,
  plugins: [arrows()],
})