Super small (4KB) and customizable progress bar for OwlCarousel 2.
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" />
- Add
owlcarousel2-progressbar
script after jQuery and OwlCarousel 2.
<script src="https://unpkg.com/owlcarousel2-progressbar"></script>
- 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>
- 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>
- That's it 😇.
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 |
You can see progress bar in action in demo.html
file.
- Install all npm packages using by running
npm i
. - Run development mode with file watcher by running
npm run dev
. - Create production ready bundle using
npm run build
.
I use SemVer for versioning. For the versions available, see the tags on this repository.
Karen Grigoryan - GitHub
This project is licensed under the MIT License - see the LICENSE.md file for details