Cyclone 2 Slider Delivers Fast, Capable Sliders
Managing and displaying images in various gallery formats and as sliders is becoming a vital ingredient of good WordPress interface design.The next two tutorials will look at two free WordPress plugins that deliver great features and functionality for the right price – free. First we consider sliders here followed by grid galleries.
There are a lot of really great WordPress Slider Plugins from Royal Slider to Cute Slider thru to Revolution Slider. But these are also premium sliders that cost between $14 to $23US for each website they are used on. Now some of these premium WordPress sliders have free versions available. But often the free versions are so crippled they are marginally useful even for simple slider tasks. So this reviewer has been on the look out for a very good, free WordPress slider. One of the best is Cyclone Slider
Cyclone Slider 2
Cyclone slider 2 delivers 4 key features that every good slider should have:
1)First Cyclone sliders respond to responsive themes. and can stretch to full page width.depending on its containing tag.
2)Cyclone slider supports image, video, and html slides;
3)Cyclone slider provides a numerous set of customizations. Choose six popular slide transitions which can be assigned to all slides or each slide individually with its own transitions including individual timings, captions, links, and image attribute for each slide if precise control is needed;
4)Cyclone slider has an easy interface for managing the creation and editing of slides.
So lets create a slider some pictures from the Eaton’s Centre at Cristmas 2015.
The opening screen for Cyclone slider has a few default options as seen in this screenshot:
Users have a number of options for creating their slider. The 2 most important are 1)where to get the images or videos from and 2)what will go on each slide. If you are a Nextgen Gallery user you can load images from a Nextgen Gallery. The Import button will load all the images from the chosen gallery that are not excluded. Finally, users can add images from both the WP Media Gallery and Nextgen to the same slider.
The screenshot below shows the different types of slides that can be opened in Cyclone:
Cyclone supports two video providers, You Tube and Vimeo and any images supported in Media Library or Nextgen Gallery. In addition HTML slides can be created as well though Cyclone ony supplies the simplest of edit tools. Users may want to edit and debug the HTML slide in a popular editor like Brackets or NotePad++ and then copy and paste into Cyclone as was done in the screenshot above.
Loading Images into a Slider
Users can load up the slider with images or videos from the Media Gallery. by clicking the Add images as Slides button. This is a fast operation when loading 3 or more images and users will have the option of uploading as well as selecting previously uploaded images in the Media Galley :
Press the button in the lower right of the screen and the images are loaded into Cyclone Slider as shown:
As you can see in the screenshot above, Cyclone opens all of the images provided showing a thumbnail of each loaded image plus 4 options [Caption, Link, Image Attributes and Slide transition Effects]. Unfortunately, Cyclone slider is not smart because it does not fill in the Caption and Image Attributes options even if provided in Nextgen Gallery or the Media Library. So users will have to fill those option values in for each slide as they require. Here is how to do so:
Now the Caption.s Title and Description will appear at the bottom of the slide when displayed. If the Link option is set then a click on the slide will open the linked to Web page in the current or a new Window depending on the Open Link setting. Finally, users can assign a Slide Transition Effect. First Enable Slide Effects in the first dropdown. In the next dropdown choose from 6 available Transition Effects. Finally choose how long the transition will occur and how long the slide will be shown. Note the values are in milliseconds – so in the screenshot above the transition effect speed is 2000 milliseconds [2 secs] and 6000 milliseconds [6 secs] for the overall slide duration.
In this way Cyclone allows for precise slide by slide control that is only available in premium sliders. But users don’t have to specify all these values , because Cyclone has a in the right sidebar a set of Basic Settings that will be applied to all the slides in the slider.
The first option is what Transition Effect to use for each slide. The choices are Fade, Fade Out, Scroll Horizontally, Tile Blind, Tile Slide and None.By the way, the None transition looks like a Scroll Horizontally with a blazing fast 5 millisecond transition.
The Next Slide Delay determines the overall slide duration in milliseconds – the default value is 4 seconds.
The Transitions Effect Speed determines how long the transition occurs. Its value must be less than the overal slide duration. The default value is 1 second.
The Width option determines the overall width of the slider. Make sure this value is less than or equal to the default Post or Page width.
So of course, the Height option determines the the overall height of the slider. Try to make the size of all the images to be used in the slider the same as the specified Width and Height. This may not be possible in which case make the aspect ratio of all the images the same. If you do so, Cyclone can resize all the images in the slider to fit within the user specified Width and Height.
The next options, Width Management, tells Cyclone what to do about responsiveness.First, Cyclone must be using a responsive theme for it to become reponsive. Set this value to Full if you want the slider to be responsive but also full-width. However, there is a caution on the responsive capabilities of the Cyclone slider. Using a variety on-responsive theme like WP’s Twenty-ten and the classic old Kubrick theme, the Cyclone slider does not show responsive capabilities. If Cyclone 2 Slider is contained within a wrapper that is responsive then it will also be responsive.
In contrast premium sliders like Slider Revolution are responsive right out of the box. Just below there is a summary of Cyclone 2 versus Premium Slider features.
Comparison of Cyclone 2 to Premium Sliders
|Cyclone 2||Premium Sliders|
|5 slider contents – image, 2 video, HTML, testimonials||More content types supported including 4 video, better HTML, custom post types, plus Post, Page auto excepts, and social media connections|
|1 slider type||3 or more slider types including carousel, paralax,, 3D revolving, etc|
|6 transition effects, simple slider||Dozens of transition effects with easing & other animation control;|
|Title and description captioning at bottom of image||Title and description captioning on and below image. Control of background color and opacity. Font color, size and type|
|No layers per image||Extensive layers and animation control of layers appearance and disappearance on each image as required|
|Limited background image, color and font control||Complete image, background, color and font control|
|Simple import/export||Templates, WYSIWYG Editor and animation interfaces|
In sum, Premium Sliders offer an array of advanced features that Cyclone is just beginning to deliverin its Pro version but is a long way from matching. But the free version of Cyclone 2 has a “sweet spot” of slider features and functionality [responsive capable, full page width sliders, custom captioning and transitions for each slide image, etc] such that Cyclone users can create sophisticated Visual Sitemaps or stunning full width video or image landing pages that can compete with the best Web designs. Even more important Cyclone users will find creating their basic slider easier and faster than the premium ones.
Returning now to the basic Cyclone customizations, it becomes clear how Cyclone slider provides “best fit” features.
The Resize setting allows users to force large images to be resized into the fixed slider dimensions.
Pause on Hover means that the slideshow will be paused whenever a user hovers the mouse over the slider. This allows browsers to examine the captions & description in detail or watch a video without interruption.
Show Prev/Next Buttons will display previous button on left and next on right when a user hovers the mouse over a slider. As soon as mouse leaves the slider the previous and next buttons disappear.so the slide appears “unblemished”. These buttons allow a user to control the speed and direction of the slideshow.
Show Navigation set to Yes places small dots below the slider, one for each slide. Click on the fourth dot and the slideshow immediately advances to the fourth slide. Cyclone offers image thumbnails in its premium version.
Random Slide Order after carefully working to get the slides in proper order, users might wonder why someone would want to change the sort order to random. Well if you have slider of artists works on sale or vacation travel spots, you might want to insure impartial promotion by have the slides appear in random order each time the slider is displayed. Random order has been a life-saver on more than one occasion.
So now having finished setting up a Cyclone slider lets take a look at a completed one:
Click on the screenshot to goto the PixofToronto.com website and view the Cyclone slider live. What is hard to assess in seeing the slider in action is how easy it was to create and customize. For example, I wanted to make the second slide a bit more memorable and take advantage of its mirror image. So I enabled the Special Slide Effect, made the slider time a little longer and used vertical blinds transition effect. As well I wanted to change the order of the slides:
Just like the WordPress menu manager, users simply drag and drop the collapsed slides into a new sort order. This is the advantage of the Cyclone slider. True, it does not have all the transitions effects of the Wow Slider or the animated layers possible with the Slider Revolution, but it is so much easier to learn and operate for the bulk of slider usage that it has become my preferred slider for use on clients websites. This is especially true for sites where the user wants to ake quick changes and customizations to their many slider.
Cyclone Slider is a “sweet spot” plugin. It fits the 80-20 rule in slider features and functionality, meeting the majority of customers needs at the right price, free. And all this with customer winning ease of use. Cyclone is highly recommended.