Swiper API: Scrollbar

Scrollbar Parameters

ParameterTypeDefaultDescription
scrollbarobject Object with scrollbar parameters. For example:var mySwiper = new Swiper('.swiper-container', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, }); 
{
elstring / HTMLElementnullString with CSS selector or HTML element of the container with scrollbar.
hidebooleantrueHide scrollbar automatically after user interaction
draggablebooleanfalseSet to true to enable make scrollbar draggable that allows you to control slider position
snapOnReleasebooleanfalseSet to true to snap slider position to slides when you release scrollbar
dragSizestring/number‘auto’Size of scrollbar draggable element in px
lockClassstring‘swiper-scrollbar-lock’Scrollbar element additional CSS class when it is disabled
dragClassstring‘swiper-scrollbar-drag’Scrollbar draggable element CSS class
}

Scrollbar Methods & Properties

Properties
mySwiper.scrollbar.elHTMLElement of Scrollbar container element
mySwiper.scrollbar.dragElHTMLElement of Scrollbar draggable handler element
Methods
mySwiper.scrollbar.updateSize();Updates scrollbar track and handler sizes

Leave a Comment

Your email address will not be published.