Auto Height

autoHeight:true animates the container height to match each slide's natural height on every navigation.

Short

Medium height

Tall slide content

Short again

Medium again

View code

<div id="my-slider">
  <div class="demo-slide s-purple ah-short">Short</div>
  <div class="demo-slide s-blue ah-medium">Medium height</div>
  <div class="demo-slide s-green ah-tall">Tall slide content</div>
  <div class="demo-slide s-amber ah-short">Short again</div>
  <div class="demo-slide s-red ah-medium">Medium again</div>
</div>

.ah-short  { height: 120px; }
.ah-medium { height: 200px; }
.ah-tall   { height: 300px; }
.demo-slide { display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#fff; }

.ah-short  { height: 120px; }
.ah-medium { height: 200px; }
.ah-tall   { height: 300px; }
.demo-slide { display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'

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