https://github.com/gijsroge/owlcarousel2-thumbs
Enables thumbnail support for Owl Carousel 2.0
https://github.com/gijsroge/owlcarousel2-thumbs
Last synced: 3 months ago
JSON representation
Enables thumbnail support for Owl Carousel 2.0
- Host: GitHub
- URL: https://github.com/gijsroge/owlcarousel2-thumbs
- Owner: gijsroge
- License: mit
- Created: 2015-03-25T19:35:31.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-30T14:37:18.000Z (almost 9 years ago)
- Last Synced: 2025-03-29T08:05:59.917Z (3 months ago)
- Language: JavaScript
- Size: 47.9 KB
- Stars: 221
- Watchers: 23
- Forks: 135
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Owl Carousel 2 Thumbnails plugin
Enables thumbnail support for Owl Carousel 2.0
## Quick start
grab the [latest release](https://github.com/gijsroge/OwlCarousel2-Thumbs/archive/0.1.7.tar.gz) and slam it behind the default owl carousel plugin.
##### Enable thumbs
```javascript
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
thumbs: true
});
});
```
## Use pre-rendered html as thumbnails. **_recommended_**
```javascript
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
thumbs: true,
thumbsPrerendered: true
});
});
```
##### Add thumbnails (link slider and thumbnails with data-slider-id attribute)
```html
Your Content
Your Content
Your Content
Your Content
slide 1
slide 2
slide 3
slide 4
```
## Or add data-thumb attribute to your slides
```html
Your Content
Your Content
Your Content
Your Content
```
#### [demo](http://gijsroge.github.io/owl-carousel2-thumbs)
## Available options
```javascript
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
// Enable thumbnails
thumbs: true,
// When only using images in your slide (like the demo) use this option to dynamicly create thumbnails without using the attribute data-thumb.
thumbImage: false,
// Enable this if you have pre-rendered thumbnails in your html instead of letting this plugin generate them. This is recommended as it will prevent FOUC
thumbsPrerendered: true,
// Class that will be used on the thumbnail container
thumbContainerClass: 'owl-thumbs',
// Class that will be used on the thumbnail item's
thumbItemClass: 'owl-thumb-item'
});
});
```
## npm
```
npm install owl.carousel2.thumbs
```
## bower
```
bower install owl.carousel2.thumbs
```
> with <3 in Belgium by [@GijsRoge](https://twitter.com/GijsRoge)