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:

• With auto scaling images
• Full Width
• Custom Widths
• One Item
• More demos

1.Getting Started

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

add to your Gemfile

gem 'owlcarousel-rails'

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

Looking for OwlCarousel2?

Use branch OwlCarousel2

gem 'owlcarousel-rails', github: 'acrogenesis/owlcarousel-rails', branch: 'OwlCarousel2'

Use at your own risk!

Contributing

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

License

The MIT License (MIT)