owlcarousel2-progressbar

Progress Bar for OwlCarousel 2

Super small (4KB) and customizable progress bar for OwlCarousel 2.

Prerequisites

Include jQuery and OwlCarousel 2.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />

Getting Started

1. Add owlcarousel2-progressbar script after jQuery and OwlCarousel 2.

<script src="https://unpkg.com/owlcarousel2-progressbar"></script>

1. Create progress bar for your carousel/s (please note that for correct work you should create progress bar before owl carousel instance/s creation).

Default options:

<script>
    $('.owl-carousel').owlCarouselProgressBar();
</script> 

Custom options:

<script>
    $('.owl-carousel').owlCarouselProgressBar({
        size: '10px',
        margin: '20px 50px',
        foregroundColor: 'darkseagreen',
        color: 'green',
        borderRadius: 0,
        transitionInterval: 1,
        progressBarClassName: 'my-custom-class-name',
        scrollerClassName: 'my-custom-scroller-class-name'
    });
</script> 

1. Create OwlCarousel 2 instance (Currently this plugin does not support loop: true option of Owl Carousel. It will be added in further version).

<script>
    $('.owl-carousel').owlCarousel();
</script> 

1. That's it 😇.

Available options

Prop	Value (default)	Description
size (string)	'2px'	Progress bar height
foregroundColor (string)	'#f0f0f0'	Progress bar background color
color (string)	'#313131'	Scroller background color
borderRadius (string)	'5px'	Progress bar border radius
margin (string)	'10px 0'	Vertical and horizontal spacers
transitionInterval (number)	0.25	Easing transition interval in seconds
progressBarClassName (string)	'owl-carousel-progress-bar'	CSS class name for progress bar element
scrollerClassName (string)	'owl-carousel-progress-bar-scroller'	CSS class name for scroller element

Demo

You can see progress bar in action in demo.html file.

---

Development

1. Install all npm packages using by running npm i.
2. Run development mode with file watcher by running npm run dev.
3. Create production ready bundle using npm run build.

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Author

Karen Grigoryan - GitHub

License

This project is licensed under the MIT License - see the LICENSE.md file for details