OwlCarousel-rails

This gem bundles the contents of OwlCarousel from OwlFonk

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. Visit Owl Carousel landing page.

Features:

Responsive
Touch Events
Mouse Slide Events
Fully Customizable
Choose the number of items to be displayed
Multiple Sliders
CSS3 3d Transitions
Custimizable controls
JSON
Custom events
Helpful callbacks

Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrom on Google Nexus.

More Demos

See what Owl can do:

1.Getting Started

Load jQuery(3+) and include Owl Carousel plugin files

add to your Gemfile

gem 'owlcarousel-rails'

Note this gem requires jQuery, be sure to add it as a dependency on your Gemfile or on wepack.

add to your application.js

//= require owl.carousel

add to your application.css

*= require owl.carousel
*= require owl.theme

2.Set up your HTML

You don't need any special markup. All you need is to wrap your divs inside the container element

. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

3.Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(".owl-carousel").owlCarousel();

4. For more details visit OwlCarousel landing page

Changelog available here

Contributing

Fork it.
Create a branch (git checkout -b my_markup)
Commit your changes (git commit -am "Cool new feature")
Push to the branch (git push origin my_markup)
Open a Pull Request
Enjoy a refreshing 'Insert Favorite Beverage' and wait

License

The MIT License (MIT)

kodius/owlcarousel-rails