Login With Github

Swiper API: Scrollbar

Scrollbar Parameters

Parameter Type Default Description
scrollbar object  

Object with scrollbar parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,


el string / HTMLElement null String with CSS selector or HTML element of the container with scrollbar.
hide boolean true Hide scrollbar automatically after user interaction
draggable boolean false Set to true to enable make scrollbar draggable that allows you to control slider position
snapOnRelease boolean false Set to true to snap slider position to slides when you release scrollbar
dragSize string/number 'auto' Size of scrollbar draggable element in px
lockClass string 'swiper-scrollbar-lock' Scrollbar element additional CSS class when it is disabled
dragClass string 'swiper-scrollbar-drag' Scrollbar draggable element CSS class

Scrollbar Methods & Properties

mySwiper.scrollbar.el HTMLElement of Scrollbar container element
mySwiper.scrollbar.dragEl HTMLElement of Scrollbar draggable handler element
mySwiper.scrollbar.updateSize(); Updates scrollbar track and handler sizes

0 Comment