Introduction to Cycle2 slideshow plugin for jQuery

Introduction to Cycle2 slideshow plugin for jQuery


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.


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


1. Include Javascript

<!-- include jQuery -->
<script src=""></script>
<!-- include Cycle2 -->
<script src="h"></script>

2. HTML markup

<div class="cycle-slideshow">
    <img src="">
    <img src="">
    <img src="">
    <img src="">

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



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


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