ScrollbarOptions | Swiper

Object with scrollbar parameters.

example

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});

Hierarchy

ScrollbarOptions

Index

Properties

Optional dragClass

dragClass: string

Scrollbar draggable element CSS class

default: 'swiper-scrollbar-drag'

Optional dragSize

dragSize: number | "auto"

Size of scrollbar draggable element in px

default: 'auto'

Optional draggable

draggable: boolean

Set to true to enable make scrollbar draggable that allows you to control slider position

default: false

Optional el

el: null | HTMLElement | CSSSelector

String with CSS selector or HTML element of the container with scrollbar.

default: null

Optional enabled

enabled: boolean

Boolean property to use with breakpoints to enable/disable scrollbar on certain breakpoints

Optional hide

hide: boolean

Hide scrollbar automatically after user interaction

default: true

Optional horizontalClass

horizontalClass: string

CSS class name set to scrollbar in horizontal Swiper

default: 'swiper-scrollbar-horizontal'

Optional lockClass

lockClass: string

Scrollbar element additional CSS class when it is disabled

default: 'swiper-scrollbar-lock'

Optional scrollbarDisabledClass

scrollbarDisabledClass: string

CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint

default: 'swiper-scrollbar-disabled'

Optional snapOnRelease

snapOnRelease: boolean

Set to true to snap slider position to slides when you release scrollbar

default: false

Optional verticalClass

verticalClass: string

CSS class name set to scrollbar in vertical Swiper

default: 'swiper-scrollbar-vertical'