Simple responsive shortcode slideshow based on popular FlexSlider with powerful css3 animations and bunch of options.
Plugin is built using WordPress custom post type and custom taxonomy to store slideshows, individual slides and their settings. Featured images are used as Slide images, Title and Content Boxes are used like an animated objects. Tag slugs are used as categories to group slides into separated slideshows and than show them with shortcode in content.
sliderCat – Responsive Slider
Different Styles and Animations
It's simple to add CSS3 animations
There are three group of settings, General Settings, individual Slideshow Settings (edit slideshow) and individual Slide Settings (add / edit slide).
1. General Settings
These are General sliderCat settings located in Dashboard / sliderCat / General Settings.
Please Note: Images will not be resized if they are already uploaded, it will affect only newly uploaded images!
Enable / Disable sliderCat CSS
Enable / Disable animate.css
Enable / Disable FlexSlider Script
Enable / Disable jQuery Easing script,
Enable / Disable jQuery MouseWheel script,
Thumb Image Size (width, height, crop). To disable each image size set width to 0,
Medium Image Size (width, height, crop),
Large Image Size (width, height, crop)
2. Slideshow Settings
Each slideshow have separate options which can be accessed in Dashboard / sliderCat / Slideshows / your slideshow name (Edit). Choose between fade or slide effect, direction, enable or disable video… Also your shortcode will be shown here, so you can copy it and use in your content (multiple slides per page are possible).
Name (actually not used anywhere),
Slug (used in shortcode as cat=”your_slideshow_slug” ),
Select Image Size (select from previously defined sizes in General Settings),
Select Transition (fade or slide),
Transition Speed in mS,
Direction (horizontal or vertical),
Easing (swing, easeInOutElastic, easeInOutSine… Easing must be enabled in General Settings to enable more options ),
Reverse (true or false),
Animation Loop (true or false),
Pause Button (true or false),
Smooth Height (true or false),
Randomize (true or false),
Video (true or false),
Carousel Item Width (0 or empty to disable Carousel view),
Carousel min. Items (number, 3-4 should be good for start),
Carousel max. items (number, 5-7 should be good for start),
Enable Mousewheel (true or false, MouseWheel script must be enabled in General Settings),
As Navigation For (slideshow can be used as carousel and navigation for “other” slideshow. if so here you should enter “other” slideshow ID)
Sync (If As Navigation For is used this must be empty in this slideshow and populated in “other” slideshow with this slideshow ID. “other” slideshow should not be carousel. Shortcodes should be put one under another one)
3. Slide Settings
Accessed from Dashboard / sliderCat / Add New Slide (or All Slides / Edit Slide)
Featured Image (slide image),
Overall Slide Duration in mS,
Slide Link URL,
Slide Link target,
Youtube / Vimeo URL,
Title: (Enable Title, Link URL, Link Target, Position, Font Color, Size, Wrap, Max Width, Custom Class, In Animation, In Animation Delay, Out Animation, Out Animation Delay),
Content Box x 2: (Position, Font Color, Size, Wrap, Max Width, Custom Class, In Animation, In Animation Delay, Out Animation, Out Animation Delay),
Simple sliderCat shortcode is generated at slideshow edit screen. However beside cat attribute (which is actually a tag slug) you can add posts attribute to limit number of slides, or use order to change default ordering. If you wanna random order use orderby.
posts="3" order="asc" order="desc" orderby="rand"
Install like any other plugin. After install activate.
- Go to Dashboard / sliderCat / General Settings to enable or disable image thumb creation and set image sizes to your desired dimensions.
- Go to Dashboard / sliderCat / Slideshows and Add New Slideshow. Edit slideshow for more options and to copy slideshow shortcode.
- Go to Dashboard / sliderCat / Add New Slide (put it to previously created slideshow).
- Paste your shortcode to post content.
Scripts used (and thanks to):
jQuery FlexSlider v2.2.2 by WooThemes
Animate.css by Daniel Eden
jQuery MouseWheel 3.1.12 by Brandon Aaron
jQuery Easing v1.3 by Tyler Smith