sliderCat wordpress slider

sliderCat, Responsive shortcode slideshow

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

Multiple Slideshows

Shortcode Ready

Different Styles and Animations

It's simple to add CSS3 animations

Slidercat Settings

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!

screenshot-1

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).
screenshot-2

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)

screenshot-3

Title,
Content Boxes,
Slideshows (tags),
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),

sliderCat Shortcode

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"

Installation

Install like any other plugin. After install activate.

  1. Go to Dashboard / sliderCat / General Settings to enable or disable image thumb creation and set image sizes to your desired dimensions.
  2. Go to Dashboard / sliderCat / Slideshows and Add New Slideshow. Edit slideshow for more options and to copy slideshow shortcode.
  3. Go to Dashboard / sliderCat / Add New Slide (put it to previously created slideshow).
  4. Paste your shortcode to post content.

Download

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

8 thoughts on “sliderCat, Responsive shortcode slideshow

  1. Hi
    Thanks for great plugin, i am unable to set right margin and left margin of the slider. How to adjust hieght and width of slideshow. The three width settings are not working.

    1. image width settings are only for image crop, and to help you keep the same proportions of the image… Slider is made to be a 100% wide, no matter how wide is the image, and to keep it at lets say 640px you will need to add some css to your style.css file.
      for example this should work for all sliders

      .slidercat {
      max-width: 640px;
      }

      or for specific slider you can use slider id

      #slidercat_17 {
      max-width: 400px;
      }

      1. and I forgot, in this case on this demo page I didn’t need to specify width because my content div is holding it at its max width…

  2. Great plug in just what I needed, I’m doing something wrong with it though and there’s no poster image when the page loads, it takes a minute to load. Any pointers? thanks a lot.

    1. Thanks, I’m glad that you like it.
      I added plugin into this post as an example, I’ll create more documentation soon…

Comments are closed.