Cyclone Slider 2

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.

Download » Templates » Give Love ♥

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 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-2/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 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.
style.min.css	Minified style.css. If absent, style.css will be used.
script.js	The file containing extra jquery code for the template.
script.min.js	Minified script.js. If absent, script.js will be used.
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_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.
$slider_metas	An array containing slides properties.
$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_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 »

To install a template, create a cycloneslider folder inside your theme and place the template in there.