Introduction to Cycle2 slideshow plugin for jQuery

INTRODUCTION

Cycle - which is a very well-known and powerful jQuery slideshow plugin now has been upgraded with a new, feature-improved version: Cycle2.

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.

FEATURES

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

1. Include Javascript

<!-- 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>

That's all, no need to call any javascript and you still have a slideshow ready

DEMO

See the Pen cycle2 slideshow demo by Thanh Nguyen (@genievn) on CodePen.

OPTIONS

Cycle2 has more advanced features that can be easily customised follow its API, please check more here

Recent Post