How to edit a Cycle slideshow

It’s really easy to manage a slideshow powered by Cycle2. This tutorial will show you how to set everything up so you can use the Photo Gallery Editor to add, remove, and reorder slides.

Required Scripts

First, download jQuery and Cycle2 and add the files to your site. Then include them in the <head> section of your page:

<script src="path/to/jquery-1.x.x.min.js"></script>
<script src="path/to/jquery.cycle2.js"></script>

Don’t forget to update the paths so they point to the right location on your server. You’ll also need to update the jQuery version depending on the one you download.


Surreal generates simple, semantic markup for its photo galleries that works great with Cycle2. All you need to do is make sure links are disabled in your gallery. Your markup should look something like this:

<div id="my-gallery" class="editable-gallery" data-links="false">
    <img src="image.jpg" alt="Your Description">

Don’t use the cycle-slideshow class on your gallery to auto-initialize Cycle2. This will make it so you can’t disable it from running in the Live Editor. Seel below for more details.


To turn Cycle on, you just need a bit of JavaScript. Add the following script immediately after the two scripts you’ve already included:

    $(document).ready( function() {

        // Don't execute if we're in the Live Editor
        if( !window.isCMS ) {

            // Enable Cycle2




Looking at the script above, you’ll notice that we’ve told Cycle2 not to run in the CMS. This prevents changes that the plugin makes to your HTML from being published, potentially breaking the slideshow.

As a result, you may see all your slides stacked on top of each other in the Live Editor. That’s easy to fix with some CSS:

/* Hide all slides in the CMS... */
.is-cms #my-gallery img {
    display: none;

/* ...except for the first one */
.is-cms #my-gallery img:first-child {
    display: block;

We’ve used the .is-cms selector described here so the styles only get picked up in the Live Editor. Now you’re ready to edit your slideshow!


Cycle2 comes with a lot of extra features. Now that you know how to make a slideshow editable, you can start customizing it by adding captions, previous/next links, transitions, and more!