FAQ

What's new in Cycle2?
Lots! The biggest change is how it's indended to be used, and that's declaritively. For most cases you will never need to write script to initialize a slideshow, you simply declare your options on the slideshow element and Cycle2 takes it from there.

Additionally, Cycle2 fully supports responsive designs!

How can I get help?
If you think you've discovered a bug or wish to request a new feature, please use the github issues page. If you need personalized help please understand that I am not able to respond with free help to the hundreds of monthly emails I receive. If you wish to hire me for assistance then arrangements can be made via email (I'm malsup at gmail dot com).
I'm using the previous Cycle plugin, should I upgrade to Cycle2?
Don't fix it if it isn't broken. If you're happy with your Cycle slideshow then there's no need to update. Consider trying Cylce2 on your next project to see which one you prefer.
Will the old Cycle plugin continue to be supported?
Yes, but it won't be getting any new features.
Can I use Cycle and Cycle2 on the same page?
No.
Does Cycle2 work with jQuery 1.4, 1.5 or 1.6?
No. Cycle2 requires jQuery 1.7 or later.
Does Cycle2 support responsive designs?
Yes!
How can I install Cycle2 via Bower?
bower install https://raw.github.com/malsup/malsup.github.com/master/jquery.cycle2.js
Or, for the minified file: 
bower install https://raw.github.com/malsup/malsup.github.com/master/min/jquery.cycle2.min.js
I want to use slides that are not images. How do I tell Cycle2 what my slides are?
Use the data-cycle-slides attribute to provide a jQuery selector which identifies the elements within the container that are slides. For example, if your slideshow is a ul with li slides you would set the attribute like this: data-cycle-slides="li" 
<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><img src="path/to/some/image1.jpg"></li>
    <li><img src="path/to/some/image2.jpg"></li>
    <li><img src="path/to/some/image3.jpg"></li>
</ul>
How dow I bind before and after callback functions in Cycle2?
Cycle2 triggeres events on the container so you bind them there like any jQuery event listener: 
$( '#mySlideshow' ).on( 'cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
    // your code to handle 'before' event
});
See the API page for a full list of Cycle2 events.
How do I get my slideshow to initialize automatically like in the demos?
Add the class cycle-slideshow to your slideshow container. Any element with that classname will automatically be initalized as a Cycle2 slideshow.
Why doesn't the cycle-initialized event fire?
It does, I promise. But if you bind your event listener after it has already fired then you won't hear it. Double check that you're not binding too late.
How do I disable the console logging that Cycle2 preforms?
Add the data-cycle-log="false" attribute to your slideshow container.
Can I use non-mustache style templates?
Yes. The template expression, or even the entire tmpl function, can be replaced to suit your needs. See the Template Customization demo for more information.
Cycle2 supports captions and overlays... what's the difference?
Very little really. The Cycle2 demos show how they are intended to be used based on their names, however you could just as easily use the caption for an overlay, and vice versa. Ultimately, having both options facilitates having two independent ways of providing and displaying slide information.
Does my slideshow need to have the class "cycle-slideshow"?
No, however that is the default class for triggering auto-initialization on a Cycle2 slideshow. The demos on this site use that classname consistently because they auto-initialize and they all include the same stylesheet which defines style rules for that class.
How can I have two elements work as the "next" trigger (or the "prev" trigger)?
The data-cycle-prev and data-cycle-next attributes identify the element to use as the prev and next triggers. These attribute values accept normal jQuery selectors so if you wanted to have both the slideshow itself and an anchor with the class next be triggers you would declare the attribute like this: 
<div class="cycle-slideshow"
    data-cycle-next=".next, .cycle-slideshow"
    ...
</div>
What effects are provided out-of-the-box?
  • fade
  • fadeout
  • scrollHorz
What's the difference between the fade and fadeout effects?
The fade transition is a cross-fade which means that both the incoming and outgoing slide are changing opacity simultaneously. The outgoing slide animates to zero opacity while the incoming slide animates to an opacity value of 1. With a cross-fade transition you will briefly see the background of the container near the middle of the transition.

The fadeout transition fades only the outgoing slide to reveal the next slide. You will never see the container background with the fadeout transition.

Do I need to include jQuery Mobile in order to use the "swipe" event?
No, Cycle2 provides an optional swipe plugin that can be used if your page does not include jQuery Mobile. See download page.
Does Cycle2 have any dependencies on other plugins?
No, however it can leverage other plugins that are installed, such as the Easing Plugin.
What options are available?
Supported options can be found on the API page.
Why do all my images (slides) display briefly when the page loads?
When a web page depends on JavaScript for DOM manipulation or styling, you may see a "flash of unstyle content" because the browser may render elements before the DOM is fully loaded and before the DOMContentLoaded event is fired. Karl Swedberg wrote a nice article on this problem and how to avoid it. Karl talks about a general purpose solution, but for Cycle2 the solution is much simpler: just hide all but your first slideshow image using CSS. For example: 
#slideshow img { display: none }
#slideshow img.first { display: block }
...
<div id="slideshow">
    <img src="image1.jpg" width="200" height="200" class="first">
    <img src="image2.jpg" width="200" height="200">
    <img src="image3.jpg" width="200" height="200">
</div>
How can I create a slideshow with bookmarkable slides?
Check out the bookmark demo.
Cycle2 is over 17kb, why does it have to be so big?
Cycle2 has a lot of features and handles a lot of edge cases. It's intended to be a plugin that you can drop on any page and it just works. Like Cycle1, only better.
I just want a simple fader or scroller slideshow. Is there a lighter-weight alternative?
If you want a totally bare-bones, no-frills slideshow plugin, check out tCycle. tCycle is a responsive, declarative, auto-initializing fade/scroll slideshow plugin that weighs in at under 1000 bytes.
:-) Thanks for asking! Click the button below to donate via Paypal.