Giter Club home page Giter Club logo

owlcarousel-rails's Introduction

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

owlcarousel-rails's People

Contributors

acrogenesis avatar andreiglingeanu avatar bitdeli-chef avatar bryant1410 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.