arrows

Previous/next navigation buttons. Auto-creates buttons inside the container, or uses existing elements.

Import

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

Usage

// Auto-create buttons
new Slider('#el', { plugins: [arrows()] })

// Use existing elements
new Slider('#el', {
  plugins: [
    arrows({
      prevEl: '#my-prev',
      nextEl: '#my-next',
      prevLabel: 'Previous',
      nextLabel: 'Next',
    }),
  ],
})

Options

Option	Type	Default	Description
prevEl	string | HTMLElement	—	Selector or element for the prev button. Auto-created if omitted.
nextEl	string | HTMLElement	—	Selector or element for the next button. Auto-created if omitted.
prevLabel	string	'Previous slide'	aria-label for the prev button.
nextLabel	string	'Next slide'	aria-label for the next button.

CSS classes

Class	Applied when
.c--slider-a__arrow	Always
.c--slider-a__arrow--prev	Prev button
.c--slider-a__arrow--next	Next button
.c--slider-a__arrow--disabled	At first/last slide (non-loop)

Demo

View arrows demo →