Cyclone Slider

Create amazing slideshows with ease. Built for both developers and non-developers.

Download »

Overview

Features

Over 25 Transitions

Cyclone Slider uses the awesome jQuery Cycle plugin. Thats over 25 transitions for you.

Easy-to-Use Interface

Cyclone Slider leverages the built-in features of WordPress. For example, the interface is the same with Posts and Pages so familiarization with the interface is a breeze. Slides can be easily rearranged through drag and drop, just like WordPress Menus. Finally, images can be uploaded by using the media uploader.

Multiple slideshows

There is no limit to how many slideshows you can create.

Individual Slideshow Settings

Each slideshow can have their own unique settings.

Ability to import images from NextGEN

Allows you to transfer images from NextGEN with just a click of a button.

Support for qTranslate

Use multiple languages in slide title and description by using qTranslate quicktags.

Shortcode

Display the slideshow anywhere within your theme by using a shortcode. The shortcode also accepts a variety of settings that can override the slideshow settings in the admin. Its a fast way to change the slideshow settings without touching the settings in the admin. Also, you can use it to create multiple instances of the same slideshow, on the same page, and give them different settings!

Customizable Templates

Every project is unique that’s why customization is a must. Cyclone Slider addresses this issue through a simple template system. You can modify the existing templates or add your own. You can also move your templates inside your theme for safekeeping.


Download

Download Cyclone Slider from WordPress.org


Installation

Install via WordPress Admin

  1. Ready the zip file of the plugin
  2. Go to Admin > Plugins > Add New
  3. On the upper portion click the Upload link
  4. Using the file upload field, upload the plugin zip file here and activate the plugin

Install via FTP

  1. First unzip the plugin file
  2. Using FTP go to your server’s wp-content/plugins directory
  3. Upload the unzipped plugin here
  4. Once finished login into your WP Admin and go to Admin > Plugins
  5. Look for Cyclone Slider and activate it

Adding a Slideshow

  1. Go to Admin > Cyclone Slider.
  2. Click Add Slideshow. You will be taken to the Add New Slideshow page.
  3. In the title area type the name of your slideshow.
  4. Add slides in the Slides panel. Check out the Adding Slides section.
  5. Thats it! Now click Publish.

Adding Slides

  1. Inside the edit slideshow screen, click the Add Slide button in the Slides panel.
  2. A new slide box will appear.
  3. Inside it you will find the Get Image button. Click it.
  4. The WordPress media box will now appear. In the "From Computer" click the Select Files button. Choose an image for this slide and upload it.
  5. Once uploaded you will see an Add to Slide button. Click it. It doesn't matter what the size of image is.
  6. Your image should now appear in the slide box.
  7. Repeat step 1 to add more slides. Save it.

Displaying a Slideshow

You can use a shortcode to display your slideshow. At a minimum you only need to specify the ID:

[cycloneslider id="my-slider"]

This one has more options:

[cycloneslider id="my-slider" fx="fade" timeout="5000" speed="1000" width="500" height="300" show_prev_next="true" show_nav="true" hover_pause="true"]

Shortcode with custom template:

[cycloneslider id="my-slider" template="custom"]

Corresponding template is in yourtheme/cycloneslider/custom/.


Templating

Note This section is intended for developers as it requires a decent understanding of PHP, HTML, CSS and the WordPress API.

Moving Templates into Your Theme

By default templates are found in plugins/cyclone-slider/templates/. DO NOT make your modifications here as it will be overwritten when the plugin is upgraded.

The recommended way is to move it in your theme. To do that:

  1. Add a folder named cycloneslider inside your theme. For example if your theme is twentyeleven your folder structure should be twentyeleven/cycloneslider/.
  2. Choose the template you want to modify. For example, the default template.
  3. Copy the folder plugins/cyclone-slider/templates/default to twentyeleven/cycloneslider/.
  4. Make your HTML modification in twentyeleven/cycloneslider/default/slider.php.
  5. Make your css mods in twentyeleven/cycloneslider/default/style.css
  6. Add your images in the images folder in twentyeleven/cycloneslider/default/images/
  7. This default template will now be used.

Template Variables

These are the variables used in templates. It provides access to all of the slideshows properties.

Name Description
$slider_id Unique id for slideshow used in markup. Useful in identifying the slideshow uniquely in javascript.
$slider_count Current count of slideshows on the page.
$slides An array containing link to slide images. Deprecated in favor of $slider_metas.
$slider_metas An array containing slides properties.
$slider_settings An array containing the slideshow properties.

$slider_metas

$slider_metas['id'] Number. The WordPress attachment ID of the slide image.
$slider_metas['link'] String. The link of the slide there is.
$slider_metas['id'] Number. The WordPress attachment ID of the slide image.
$slider_metas['link'] String. The link of the slide there is.
$slider_metas['title'] String. The slide title.
$slider_metas['description'] String. The slide description.
$slider_metas['link_target'] String. Either _self or _blank.
$slider_metas['fx'] String. The slide transition effect.
$slider_metas['speed'] Number. The slide transition speed in milliseconds.
$slider_metas['timeout'] Number. Milliseconds before next slide is shown.
$slider_metas['type'] String. Type of slide. Currently there is only type image.

$slider_settings

$slider_settings['fx'] String. The transition effect of the slideshow.
$slider_settings['speed'] Number. The speed of the slideshow in milliseconds.
$slider_settings['timeout'] Number. The slideshow transition speed in milliseconds.
$slider_settings['width'] Number. Slideshow width in pixels.
$slider_settings['height'] Number. Slideshow height in pixels.
$slider_settings['hover_pause'] String. Either true or false
$slider_settings['show_prev_next'] Number. Either 1 or 0. Determines if slideshow previous and next buttons are shown.
$slider_settings['show_nav'] Number. Either 1 or 0. Determines if slideshow navigation is shown.