alex-digisol / owlcarousel-scrollbar-plugin

A plugin for navigating slides through dragging a scrollbar

Owl Carousel Scrollbar Plugin

This is a simple plugin to setup scrollbar for owl carousel slider. Scrollbar can be of two types: 1) Progress bar and 2) Simple Scroll bar. Dragging the handle will move the slides accordingly.

How to use?

Pass scrollbarType parameter with the Owl Carousel options as following:

scrollbarType: 'scroll' or scrollbarType: 'progress'

var owl = $(".owl-carousel");

owl.owlCarousel({
	loop: true,
	margin: 15,
	nav: false,
	dots: false,
	singleItem: true,
	autoplay: true,
	smartSpeed: 1000,
	autoplayTimeout: 1000,

    // the following  parameter is required for the scrollbar. The value can be one out of "scroll" or "progress"

	scrollbarType: "progress",

	responsive: {
		0: {
			items: 2
		},
		600: {
			items: 3
		},
		1000: {
			items: 4
		}
	}
});

Known Issues

Scrollar have some quirks when used with looped slider.