Easy Carousel Slider Plugin with jQuery - Open Carousel

Open Carousel is a simple and easy-to-use jQuery Carousel plugin that gives visitors easy and visible access to several content items.

You might also like:

• jQuery Waterwheel Carousel Plugin
• Intuitive & Lightweight Carousel Plugin - Looper.js
• Highly Customizable Carousel For jQuery - rondell
• Lightweight Carousel Plugin For jQuery - Cycle.js
• Simple Carousel Slidershow Plugin with jQuery  - microfiche
• Responsive Carousel Slideshow with jQuery
• Automatic Infinite Carousel with jQuery
• Responsive and Touch-Enabled Carousel Plugin - RS Carousel

Features:

• Fit Whatever Content You Want
• Easily add indicator circles
• Scrolling by multiple slides at once
• Support for multiple instances
• Ability to link to Slides

How to use it:

1. Include jQuery Open Carousel CSS file on your page

<link rel = stylesheet type = "text/css" href = "jquery.openCarousel.css">

2. Download and load jQuery library and jquery.openCarousel.js

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.openCarousel.js">

3. Markup

<div class="ocarousel example_info" data-ocarousel-period="6000">
<div class="ocarousel_window">
<div style="background: #c8daff; width: 884px;">
<h3>Open but Easy</h3>
<p> ... </p>
</div>
<div style="background: #deffc8; width: 640px;">
<h3>Fit Whatever Content You Want</h3>
<p> ... </p>
</div>
<div style="background: #ffefc8; width: 884px;">
<h3 style="float: left;">And...</h3>
<br clear="all" />
<p style="float: right; width: 50%;"> ... </p>
</div>
<div style="background: #ffc8c8; width: 884px;">
<h3>Checkout the README For More!</h3>
</div>
</div>
<br />
<a href="#" data-ocarousel-link="left" style="float: left;"><<<</a> <a href="#" data-ocarousel-link="right" style="float: right;">>>></a>
<div class="ocarousel_indicators"></div>
</div>

4. Customize your carousel slider using data-* attribute

speed: .5 * 1000	// how long each transition is, milliseconds
period: 4 * 1000	// time between frame changes, milliseconds (Infinity will prevent autoscrolling altogether)
transition: scroll	// type of transition animation ("scroll" or "fade")
perscroll: 1	// number of slides to pass over for each scroll
wrapearly: 0	// scroll to the beginning when reaching this many slides before the end
shuffle: false	// setting to true will randomize the order of slides, false will keep the order given in html
indicator-fill: #ffffff	// inactive fill color of indicator circles
indicator-r: 6	// radius of indicator circles
indicator-spacing: 6	// spacing between indicators
indicator-cy: 20	// y position of indicator circles
indicator-stroke: #afafaf	// stroke color of indicator cirlces
indicator-strokewidth: 2	// stroke width of indicator circles

Change Log:

2014-03-14

• added responsive example; 
• centered SVG indicators in DOM to work with changing screen sizes; 
• renamed fullscreen to fullwidth

2014-03-05

• only rerender on window resize if fullscreen is set

2014-02-23

• added the publich callback attribute onSlideChanged

2013-12-15

• fallback indicator png for browsers with no SVG support
• made backup indicators gif instead of png for better appearance in ie6
• fixed bug where jQuery 1.4.3 was not actually supported due to off and on functions, removed extra files

v1.1.0 (2013-05-19)

• Refactored for easy external access, included add/remove and other useful public methods

---

This awesome jQuery plugin is developed by justinmc. For more Advanced Usages, please check the demo page or visit the official website.