Horizontal + mouse wheel

Scroll over the slider with your mouse wheel or trackpad to navigate. forceToAxis: true intercepts only the horizontal component of the scroll event, so vertical page scroll still works normally outside the slider.

Scroll here with mouse wheel or trackpad

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }
.c--slider-a__pagination { display: flex; justify-content: center; gap: 6px; padding: 12px 0; }
.c--slider-a__pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.c--slider-a__pagination-bullet--active { background: #6C2BD9; transform: scale(1.3); }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }

  &__pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
  }

  &__pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;

    &--active {
      background: #6C2BD9;
      transform: scale(1.3);
    }
  }
}

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    mouseWheel({ forceToAxis: true }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Vertical + mouse wheel

Mouse wheel feels natural with a vertical slider — up/down scroll maps directly to prev/next. Great for full-page vertical sections or timeline layouts.

Scroll here with mouse wheel or trackpad

View code

<div class="c--slider-a c--slider-a--vertical" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

/* Vertical mode */
.c--slider-a--vertical { height: 300px; }
.c--slider-a--vertical .c--slider-a__wrapper { flex-direction: column; height: 100%; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }

  &--vertical {
    height: 300px;
  }

  &--vertical .c--slider-a__wrapper {
    flex-direction: column;
    height: 100%;
  }
}

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

new Slider('#my-slider', {
  direction: 'vertical',
  loop: false,
  rewind: true,
  plugins: [
    mouseWheel({ forceToAxis: true }),
    arrows(),
    pagination({ type: 'fraction' }),
  ],
})

Multi-slide + mouse wheel

Mouse wheel with multiple slides per page — each scroll event advances a full page, not a single slide. Useful for grid carousels navigable from the keyboard or trackpad without reaching for arrows.

Scroll here with mouse wheel or trackpad

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
    <div class="c--slider-a__slide">6</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; height: 200px; }
.c--slider-a__pagination { display: flex; justify-content: center; padding: 12px 0; }
.c--slider-a__pagination-fraction { font-size: 0.85rem; color: #6b7280; font-variant-numeric: tabular-nums; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    height: 200px;
  }

  &__pagination {
    display: flex;
    justify-content: center;
    padding: 12px 0;
  }

  &__pagination-fraction {
    font-size: 0.85rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
  }
}

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

new Slider('#my-slider', {
  slidesPerPage: 3,
  gutter: 12,
  loop: false,
  rewind: true,
  plugins: [
    mouseWheel({ forceToAxis: true }),
    arrows(),
    pagination({ el: '#my-pag', type: 'fraction' }),
  ],
})