Cyclone Slider 2

Red Boat
Found this boat on the other side of the white sands.

Cyclone Slider 2 is a slideshow plugin for WordPress. A slideshow is a series of slides, which can be an image, video or custom html, that uses an animation when transitioning between slides. WordPress is web software you can use to create a beautiful website or blog.

Free Version┬╗ Premium Version ┬╗

Why Use It?

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 built-in Media Manager.

Customizability

Every project is unique that’s why customization is a must. Cyclone Slider 2 addresses this issue through a template system. The templates allow developers to modify the look and behavior of slideshows depending on the client’s requirements. You can modify or override the existing templates or add your own template.

Responsive Slideshow

Cyclone Slider 2 is a responsive slideshow. It means the slideshow dimension changes along with the size of the screen, ideal when your site is viewed on smartphones and tablets.

Unlimited Slideshows

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

Individual Slideshow Settings

Each slideshow can have their own unique settings independent of other slideshows.

Multiple Slide Types

Supports image, video, and custom HTML slides.

Powered by Cycle 2

The most flexible jQuery slideshow plugin out there. Mike Alsup has done an incredible job with Cycle 2.

Shortcode for displaying slideshows

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.

Per-Slide Settings

Other than the global slideshow transition effects, you can add individual transition effects for each slide.

Tile Effects

Add tile effects, similar to Nivo Slider.

Ability to import images from NextGEN

Allows you to transfer images from NextGEN to your slideshow.

Translation for Slide Title and Description

Ability to use qTranslate quick tags for slide title and descriptions (qTranslate must be installed and active).

Widget

It comes with a widget to display your slideshow easily in widget areas.

Random Slide Order

You can make the slides appear at random order on every page load.

It’s totally FREE!

Cyclone Slider and Cyclone Slider 2 is my thank you to the open source community. Cyclone Slider 2 was supposed to be a premium plugin but I decided to give it for free for the benefit of the WordPress community. To support development you can either donate or purchase the premium templates, both of which of course are purely optional.

Installation

Requirements

  • WordPress 3.3.2 or higher
  • Administration access to your site
  • FTP access to your server

Download

Download Cyclone Slider 2 from WordPress.org

Setup

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 2 and activate it

How to Use

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-2/templates/. DO NOT make your modifications here as it will be overwritten when the plugin is upgraded.

The recommended way (as of version 2.8.0) is to move it in wp-content/cycloneslider. To do that:

  1. Add a folder named cycloneslider inside your wp-content folder..
  2. Choose the template you want to modify. For example, the standard template.
  3. Copy the folder plugins/cyclone-slider-2/templates/standard inside wp-content/cycloneslider/.
  4. Make your HTML modification in wp-content/cycloneslider/standard/slider.php.
  5. Make your CSS modifications in wp-content/cycloneslider/standard/style.css
  6. Add your images in the images folder in wp-content/cycloneslider/standard/images/
  7. This standard template will now be used.

Template Files

config.txt Configuration file for template. Currently contains the slide types supported by the template. Follows the php.ini format.
slider.php The php file containing the complete slideshow structure. Contains PHP code and HTML.
style.css The file containing the styles specific for the template.
script.js The file containing extra jquery code for the template.
screenshot.jpg The preview of the template.

Template Variables

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

Name Description
$slider_html_id A string of slider id and slider count. Useful in identifying the slideshow uniquely in javascript.
$slider_count Current count of slideshows on the page.
$slides An array containing slides. Each slide is an array containing the slide info.
$slider_settings An array containing the slideshow properties.
$image_count Total number of image slides.
$video_count Total number of video slides.
$custom_count Total number of custom slides.
$slider_id (Deprecated since 2.6.0, use $slider_html_id instead) Unique string to identify the slideshow.
$slider_metas (Deprecated since 2.5.5, use $slides instead) An array containing slides properties.

$slider_metas

id Number. The WordPress attachment ID of the slide image.
type String. Type of slide. Can be image, video or custom.
link String. The link of the slide there is.
title String. The slide title.
description String. The slide description.
link_target String. Either _self or _blank.
img_alt String. The value for the alt attribute of the slide image.
img_title String. The value for the title attribute of the slide image.
fx String. The slide transition effect.
speed Number. The slide transition speed in milliseconds.
timeout Number. Milliseconds before next slide is shown.
tile_count Number. Number of tiles for the transition. Used only if transition is Tile Slide or Tile Blind.
tile_vertical String. Either true or false. Position of tiles for the transition. True for vertical, false for horizontal. Used only if transition is Tile Slide or Tile Blind.
img_alt String. The value of the alt attribute of the img tag.
img_title String. The value of the title attribute of the img tag.
video_thumb String. The URL of the video thumbnail.
video_url String. The URL of the video.
video String. The embed code of video.
custom String. The HTML or text value of a custom slide.
How to Use

$slider_metas is an array of slide properties so you need to loop thru each one to access one slide:

<?php
foreach($slider_metas as $i=>$slider_meta):
echo $slider_meta['id'];
echo $slider_meta['type'];
echo $slider_meta['link']; //So on and so forth
endforeach;
?>

$slider_settings

template String. The name of the slideshow template being used.
fx String. The transition effect of the slideshow.
speed Number. The speed of the slideshow in milliseconds.
timeout Number. The slideshow transition speed in milliseconds.
width Number. Slideshow width in pixels.
height Number. Slideshow height in pixels.
hover_pause String. Either true or false
show_prev_next Number. Either 1 or 0. Determines if slideshow previous and next buttons are shown.
show_nav Number. Either 1 or 0. Determines if slideshow navigation is shown.
tile_count Number. Number of tiles for the transition. Used only if transition is Tile Slide or Tile Blind.
tile_vertical String. Either true or false. Position of tiles for the transition. True for vertical, false for horizontal. Used only if transition is Tile Slide or Tile Blind.
random Number. Either 0 or 1. Make the slides order random on every page visit.
resize Number. Either 0 or 1. Setting it to 1 the slide image will be resized to the slideshow dimension, 0 will use the original image.
How to Use
<?php
echo $slider_settings['template'];
echo $slider_settings['fx'];
echo $slider_settings['speed']; //So on and so forth
?>

Template Functions

cyclone_settings Return the cycle 2 slideshow data attributes.
cyclone_slide_settings Return the cycle 2 slide data attributes.
cyclone_slide_image_url Return the url of the image either resized or not.

Templates

Get More Templates for Cyclone Slider 2 »