
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 carousels acts as a navigation for the other.
You might also like:
Basic usage:
1. Include the latest jQuery and jQuery jcarousel plugin on your page
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="dist/jquery.jcarousel.min.js"></script>
2. The CSS
.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; }
3. 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
(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);
Change logs:
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.
- Publication date: 17.02.2018
- Source