Gutter — gap between slides

gutter adds pixel spacing between each slide. Here 3 items per page with a 16px gap.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">A</div>
  <div class="demo-slide s-blue">B</div>
  <div class="demo-slide s-green">C</div>
  <div class="demo-slide s-amber">D</div>
  <div class="demo-slide s-red">E</div>
  <div class="demo-slide s-pink">F</div>
  <div class="demo-slide s-teal">G</div>
</div>

.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-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 { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-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 { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

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

new Slider('#my-slider', {
  items: 3,
  gutter: 16,
  loop: true,
  speed: 300,
  plugins: [arrows()],
})

Gutter + edgePadding — peek adjacent slides

edgePadding makes the prev/next slides peek in from the sides, hinting that there is more content to scroll. Combined with gutter: 16.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">A</div>
  <div class="demo-slide s-blue">B</div>
  <div class="demo-slide s-green">C</div>
  <div class="demo-slide s-amber">D</div>
  <div class="demo-slide s-red">E</div>
  <div class="demo-slide s-pink">F</div>
  <div class="demo-slide s-teal">G</div>
</div>

.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-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 { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-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 { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

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

new Slider('#my-slider', {
  items: 1,
  gutter: 16,
  edgePadding: 40,
  loop: true,
  speed: 300,
  plugins: [arrows()],
})