jQurty HTML Content Carousel Plugin - jcarousel
File Size: | 557 K8 |
---|---|
Views Total: | 31685 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jcarousel is a simple and fast jQuery carousel slideshow plugin for controlling a list of items in horizontal or vertical order.
It also supports for connecting two carousels together so that one carousel acts as a navigation for the other.
Available extensions:
- Autoscroll: provides auto scrolling support.
- Control: provides carousel controls.
- Pagination: provides pagination support.
- ScrollIntoView: provides scroll into view support.
See also:
- 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
- Easy Carousel Slider Plugin with jQuery - Open Carousel
Basic usage:
1. Include the latest jQuery and jQuery jcarousel plugin on your page.
<script src="jquery.min.js"></script> <script src="dist/jquery.jcarousel.min.js"></script>
2. Include an extension of the jQuery jcarousel on the page (OPTIONAL).
<script src="dist/jquery.jcarousel-autoscroll.min.js"></script> <script src="dist/jquery.jcarousel-control.min.js"></script> <script src="dist/jquery.jcarousel-pagination.min.js"></script> <script src="dist/jquery.jcarousel-scrollintoview.min.js"></script>
3. The example CSS for the carousel.
.carousel-wrapper { margin: 20px auto; position: relative; border: 10px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; box-shadow: 0 0 2px #999; } .carousel-wrapper .photo-credits { position: absolute; right: 15px; bottom: 0; font-size: 13px; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, 0.85); opacity: .66; } .carousel-wrapper .photo-credits a { color: #fff; } /** Carousel **/ .carousel { position: relative; overflow: hidden; width: 600px; height: 400px; } .carousel ul { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; } .carousel li { float: left; } /** Carousel Controls **/ .carousel-control-prev, .carousel-control-next { position: absolute; top: 200px; width: 30px; height: 30px; text-align: center; background: #4E443C; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 24px/27px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 2px #999; -moz-box-shadow: 0 0 2px #999; box-shadow: 0 0 2px #999; } .carousel-control-prev { left: -50px; } .carousel-control-next { right: -50px; } .carousel-control-prev:hover span, .carousel-control-next:hover span { display: block; }
4. The required Markup HTML Structure. Configuration is done via data-*
attributes.
<div class="carousel-wrapper"> <div data-jcarousel="true" data-wrap="circular" class="carousel"> <ul> <li><img src="img1.jpg" width="600" height="400" alt=""></li> <li><img src="img2.jpg" width="600" height="400" alt=""></li> <li><img src="img3.jpg" width="600" height="400" alt=""></li> <li><img src="img4.jpg" width="600" height="400" alt=""></li> <li><img src="img5.jpg" width="600" height="400" alt=""></li> <li><img src="img6.jpg" width="600" height="400" alt=""></li> </ul> </div> <a data-jcarousel-control="true" data-target="-=1" href="#" class="carousel-control-prev">‹</a> <a data-jcarousel-control="true" data-target="+=1" href="#" class="carousel-control-next">›</a> </div>
4. The javascript to activate the plugin.
(function($) { $(function() { $('[data-jcarousel]').each(function() { var el = $(this); el.jcarousel(el.data()); }); $('[data-jcarousel-control]').each(function() { var el = $(this); el.jcarouselControl(el.data()); }); }); })(jQuery);
5. All possible plugin options for the carousel.
{ // function or a jQuery selector to select the list list: function() { return this.element().children().eq(0); }, // function or a jQuery selector to select the items items: function() { return this.list().children(); }, // animation speed animation: 400, // true = enables CSS3 transitions. transitions: false, // whether to wrap at the first or last item (or both) and jump back to the start/end // "first", "last", "both" or "circular" wrap: null, // appears in vertical orientation vertical: null, // appears in RTL (Right-To-Left) mode rtl: null, // whether to center the items center: false }
Change logs:
v0.3.9 (2018-07-30)
- Fix jQuery version to include path version
v0.3.8 (2018-05-31)
- fix(autoscroll): Add 'method' default option, add doc for method option in Autoscroll plugin
v0.3.7 (2018-02-17)
- Changed default list width from 20000em to 10000em to fix issues with IE
- Fixed regression regarding transforms
v0.3.5 (2018-02-17)
- Fixed reload called on page scroll on iOS.
- Use element() to determine orientation for detecting vertical mode.
2017-03-08
- Improve reloading carousel on window resize
v0.3.4 (2015-09-24)
- Autoscroll plugin now pauses scrolling when the window or tab becomes hidden
v0.3.3 (2015-02-28)
- Fixed hasNext() for centered carousels
- Cleaned up .gitattributes to include package manager files
v0.3.2 (2015-02-23)
- Fixed page calculation in pagination plugin
- Fixed incompatibility with jQuery < 1.9
v0.3.1 (2014-04-27)
- Fixed hasNext/hasPrev in underflow mode
- Fixed wrong page calculation on reload for pagination plugin
- Added new method reloadCarouselItems to pagination plugin
v0.3.0 (2013-11-23)
- Stable release of the completely rewritten plugin.
This awesome jQuery plugin is developed by jsor. For more Advanced Usages, please check the demo page or visit the official website.