Skip to content

bradvin/OwlCarousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OwlCarousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

###Features:

  • Responsive
  • Touch Event
  • Mouse Slide Events
  • Fully Customizable
  • Choose the number of items to be displayed
  • Multiple Sliders
  • CSS3 3d Transitions
  • Custimizable controlls

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

More Demos

See what Owl can do:

1.Getting Started

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

<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
 <!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
 
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

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 owl-theme">
  <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();

For more information visit OwlCarousel landing page

About

jQuery Plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published