Cycle 2 A Fully Customizable and Robust jQuery Slider

Written by Kevin Liew on 02 Oct 2012
35,206 Views • Javascript

Introduction

If you have been looking for slider in the past, you would have stumbled upon Cycle slider. Now we have Cycle 2 which is even more robust and support new features such as responsive and declarative initialization style that allows full customization without any scripting. If you look at the API, you will find a staggering amount of options and events that will give you the full access and capability to create a unique slider. However, it still in Beta, so use it cautiously.

Features

  • Supports all browswers
  • 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

Sample code

Declarative initialization

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="200"
    >
    <img data-src="http://malsup.github.com/images/p1.jpg">
    <img data-src="http://malsup.github.com/images/p2.jpg">
    <img data-src="http://malsup.github.com/images/p3.jpg">
    <img data-src="http://malsup.github.com/images/p4.jpg">
</div>

SPECIFICATIONS & DOWNLOAD

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.