Introduction to Cycle2 slideshow plugin for jQuery
The plugin fit nicely to websites that requires a completely customized slideshow as it does not declare any markup or style (no CSS included).
Cycle2 has great supports for responsive layouts, has options for almost everything you need (global and per slide) and can be extended easily for advanced usage using a full-featured API.
- Supports all browsers
- Declarative: no scripting needed!
- Responsive: fully control your slideshow via css (resize this page to see!)
- Customizable: per-slide option overrides
- Extensible: fully customizable API (on a per-slideshow basis if you wish)
- Smart: supports image loading and delayed initialization
- Smarter: supports progressive image loading
- Out-of-the-box functionality for pagers, captions, overlays, and prev/next controls
- Support for swipe gesture on mobile devices
- Fade, scroll, shuffle, tile and carousel transitions
- Bookmarkable slides
- And lots more!
HOW TO USE
<!-- include jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <!-- include Cycle2 --> <script src="hhttps://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js"></script>
2. HTML markup
<div class="cycle-slideshow"> <img src="http://malsup.github.io/images/p1.jpg"> <img src="http://malsup.github.io/images/p2.jpg"> <img src="http://malsup.github.io/images/p3.jpg"> <img src="http://malsup.github.io/images/p4.jpg"> </div>
Cycle2 has more advanced features that can be easily customised follow its API, please check more here