owl.carousel2.thumbs

WebJar for owl.carousel2.thumbs

License	MIT
GroupId	org.webjars.npm
ArtifactId	owl.carousel2.thumbs
Last Version	0.1.8
Release Date	Apr 25, 2018
Type	jar
Description	owl.carousel2.thumbs WebJar for owl.carousel2.thumbs
Project URL	http://webjars.org
Source Code Management	https://github.com/gijsroge/OwlCarousel2-Thumbs

Download owl.carousel2.thumbs

Filename	Size
owl.carousel2.thumbs-0.1.8.pom
owl.carousel2.thumbs-0.1.8.jar	11 KB
owl.carousel2.thumbs-0.1.8-sources.jar	22 bytes
owl.carousel2.thumbs-0.1.8-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/owl.carousel2.thumbs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>owl.carousel2.thumbs</artifactId>
    <version>0.1.8</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/owl.carousel2.thumbs/
implementation 'org.webjars.npm:owl.carousel2.thumbs:0.1.8'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/owl.carousel2.thumbs/
implementation ("org.webjars.npm:owl.carousel2.thumbs:0.1.8")

Apache Buildr

'org.webjars.npm:owl.carousel2.thumbs:jar:0.1.8'

Apache Ivy

<dependency org="org.webjars.npm" name="owl.carousel2.thumbs" rev="0.1.8">
  <artifact name="owl.carousel2.thumbs" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='owl.carousel2.thumbs', version='0.1.8')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "owl.carousel2.thumbs" % "0.1.8"

Leiningen

[org.webjars.npm/owl.carousel2.thumbs "0.1.8"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Owl Carousel 2 Thumbnails plugin

Enables thumbnail support for Owl Carousel 2.0

Quick start

grab the latest release and slam it behind the default owl carousel plugin.

Enable thumbs

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true
  });
});

Use pre-rendered html as thumbnails. recommended

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true,
    thumbsPrerendered: true
  });
});

Add thumbnails (link slider and thumbnails with data-slider-id attribute)

<div class="owl-carousel" data-slider-id="1">
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
    <button class="owl-thumb-item">slide 1</button>
    <button class="owl-thumb-item">slide 2</button>
    <button class="owl-thumb-item">slide 3</button>
    <button class="owl-thumb-item">slide 4</button>
</div>

Or add data-thumb attribute to your slides

<div class="owl-carousel">
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
    <div data-thumb='Content of your thumbnail (can be anything)'> Your Content </div>
</div>

demo

Available options

$(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

Versions

Version
0.1.8 Apr 25, 2018