New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

owl.carousel2.thumbs

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

owl.carousel2.thumbs

Enables thumbnail support for Owl Carousel 2.0

  • 0.1.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
514
increased by7.76%
Maintainers
1
Weekly downloads
 
Created
Source

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
  });
});
$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    thumbs: true,
    thumbsPrerendered: true
  });
});
<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

Keywords

FAQs

Package last updated on 30 Aug 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc