Sliderm provides a variety of features and they all can be controlled through configuration options, the default values of these options are defined in ./src/core/config.js.

Primary options

field type default options description
arrow Boolean true ✔️ The arrow button besides the slider.
pagination Boolean true   The pagination on the bottom of the slider.
spinner Boolean true ✔️ The loading effect of initializing Sliderm.
grouping Boolean false   Move a group of slide items or just one.
loop Boolean true   Let the slider become a carousel.
preview Boolean false ✔️ Preview the edge of the previous and next slide item in the visible area.
breakpoint Boolean true ✔️ Adjust the column count automatically depends on the width of window.
touch Boolean true ✔️ Support to swipe the slide items on mobile devices .
autoplay Boolean false ✔️ Play the slider automatically.
columns Number 4   The amount of slide items displayed in the visible area.
duration Number 1000   The speed of the slider. (milliseconds)
spacing Number 10   The spacing between slide items.
align String top   Align the slider vertically.
extenstions Array []   The injection point of the functions to extend Sliderm.

Child options

The child options has a prefix string _ to mapping the its parent option.

field type default description
_arrow.color String #ffffff The color of the arrows.
_arrow.bgColor String #000000 The background color of the arrow’s container.
_arrow.opacity Number 0.5 The opacity of the arrow’s container.
_arrow.size Number 16 The size of the arrow icons.
Expected value: 13-28
_arrow.shape String circle The size of the arrow icons.
Expected value: circle, square, none
_arrow.bold Number 2 The bold of the arrow icon.
Expected value: 1, 2, 3
_preview.edge Number 40 The width of the edge of the previous and next items.
_spinner.color String #1cbbb4 The color of the spinner.
_breakpoint.columns Object {
  4: false,
  3: 960,
  2: 768,
  1: 420
The breakpoints used to change the columns in visible area of the slider.
_touch.threshold Number 10 The minimum distance traveled to be considered a swipe.
_touch.duration Number 300 The maximum time spent to be considered a swipe.
_autoplay.direction String left The direction that slider items will move on.
_autoplay.duration Number 5000 The time to stay and then play the next.


The following example contains all the default options.

const sliderm = new Sliderm('#exampe-slider', {
  arrow: true,
  pagination: true,
  spinner: true,
  grouping: false,
  loop: true,
  preview: false,
  breakpoint: true,
  touch: true,
  autoplay: false,
  columns: 4,
  duration: 1000,
  spacing: 10,
  align: 'center',
  extensions: [],
  _arrow: {
    color: '#ffffff',
    bgColor: '#000000',
    opacity: 0.5,
    size: 16,
    shape: 'circle',
    bold: 2,
  _preview: {
    edge: 40,
  _spinner: {
    color: '#1cbbb4',
  _breakpoint: {
    columns: {
      4: false,
      3: 960,
      2: 768,
      1: 420,
  _touch: {
    threshold: 10,
    duration: 300,
  _autoplay: {
    direction: 'left',
    duration: 5000,

If you are interested in customizing your own extensions, the getOption method is useful to fetch the settings.

  • Fetch the primary option.
const isTouch = sliderm.getOption('touch');
  • Fetch the child options of the option touch.
const duration = sliderm.getOption('touch.duration');

For more details about customizing the extensions, read Extensions page.