Documentation

WP Slick Slider and Image Carousel Pro

Getting started with WP Slick Slider and Image Carousel Pro

WP Slick Slider and Image Carousel Pro adds a Menu tab in WP Admin side with the name “Slick Slider Pro” where you can add new Image Title, Content, Link and Image as a featured image, edit and delete.

Screen shows “Slick Slider Pro” tab in the left side and All Images added
slick-slider-1

This plugin work same like WordPress post section where you can add title, content and featured image. To add a news slide in WP Slick Slider just need to follow few steps.

  • Go to Slick Slider Pro Tab and click on add slide
  • Add Image title, content, Read more link and featured image and update
  • If you want to display category wise then go to Slick Slider -> Slider Category and create a category
  • When you create a slide, select the category for that slide

Below screen shows how to add a Image for image slider
slick-slider-2

If you want to display category wise then go to Slick Slider Pro -> Slider Category and select the shortcode.

Below screen show category shortcode
slider-category

How to display and shortcode

Display a Slick Image slider is very simple. Just add the following shortcode on any page to display image slider we have added 3 shortcode.
[slick-slider] – Slick Slider
[slick-carousel-slider] – Slick Carousel Slider
[slick-variable-slider] – Slick Variable Slider

If you want to select the design then you can use following parameter :

[sick-slider design="prodesign-1"]
We have 30 designs for Slick Slider. Where designs are : prodesign-1 to 30

[slick-carousel-slider design="prodesign-1"]
We have 30 designs for Slick Slider Carousel. Where designs are : prodesign-1 to 30

[slick-variable-slider design="prodesign-1"]
We have 33 designs for Slick Slider Varaible. Where designs are : prodesign-1 to 33

[slick-carousel-slider design="prodesign-1" centermode="true"]
You can use centermode=”true” parameter only slick slider carousel all design
Note : For centermode=”true” Use with odd numbered slidestoshow counts.

You can also use template code to display image slider in your theme template.

echo do_shortcode('[slick-slider]');
echo do_shortcode('[slick-carousel-slider]');
echo do_shortcode('[slick-variable-slider]');

Complete Shortcode parameters

[slick-slider limit="5" category="5,10" include_cat_child="true" design="prodesign-1" show_content="true" loop="true" dots="true" arrows="true" autoplay="true" autoplay_interval="3000" speed="300" fade="false" sliderheight="400" show_read_more="true" read_more_text="Read More" slider_nav_column="3" link_target="self" order="desc" orderby="date" exclude_cat="5,10" posts="5,10" exclude_post="5,10"]
[slick-carousel-slider limit="5" category="5,10" include_cat_child="true" design="prodesign-1" image_size="full" show_content="true" slidestoshow="2" slidestoscroll="1" loop="true" dots="true" arrows="true" autoplay="true" autoplay_interval="3000" speed="300" sliderheight="400" show_read_more="true" read_more_text="Read More" link_target="self" order="desc" orderby="date" exclude_cat="5,10" posts="5,10" exclude_post="5,10"]
[slick-variable-slider limit="5" category="5,10" include_cat_child="true" design="prodesign-1" image_size="full" show_content="true" loop="true" dots="true" arrows="true" autoplay="true" autoplay_interval="3000" speed="300" sliderheight="400" show_read_more="true" read_more_text="Read More" link_target="self" order="desc" orderby="date" exclude_cat="5,10" posts="5,10" exclude_post="5,10"]

Use Following parameters with shortcode

[slick-slider]

  • Limit:
    [slick-slider limit="8"]
    Limit define the number of slides to be display at a time. By default set to “15”. if you want to display all images then set limit to limit=”-1″.

  • Design:
    [slick-slider design="prodesign-1"]
    Designs are prodesign-1 to prodesign-30.

  • Category:
    [slick-slider category="category_ID"]
    Display slider by their category ID.

  • Include Cat Child:
    [slick-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.

  • Show Content:
    [slick-slider show_content="true" ]
    Display content OR not. By default value is “true”. Options are “true OR false”.

  • Slider Loop:
    [slick-slider loop="true" ]
    Create a Infinite loop sliding. By default value is “true”. Options are “true OR false”.

  • Slider Pagination and Arrows:
    [slick-slider dots="false" arrows="false"]
    Display slider arrows or not and Display slider pagination dots or not. By default values of dots and arrows are “false”.

  • Arrows Design:
    [slick-slider arrow_design="design-2"]
    Choose slider arrow design. Designs are design-1 to design-8.

  • Dots Design:
    [slick-slider dots_design="design-2"]
    Choose slider dots design. Designs are design-1 to design-12.

  • Autoplay:
    [slick-slider autoplay="true"]
    Start slider automatically. Values are “true” OR “false”.

  • Autoplay Interval:
    [slick-slider autoplay_interval="3000"]
    Delay between two slides.

  • Slider Speed:
    [slick-slider speed="3000"]
    Control speed of slider.

  • Fade:
    [slick-slider fade="true"]
    Slider Fade effect. By default effect is slide. If you set fade=”true” then effect change from slide to fade.

  • Slider Height:
    [slick-slider sliderheight="400"]
    Set Slider height. By default given 400px height.

  • Show Read More:
    [slick-slider show_read_more="false"]
    Show/Hide read more links. Values are “true” and “false”.

  • Read More Text:
    [slick-slider read_more_text="More"]
    Control read more button text.

  • Link Target:
    [slick-slider link_target="blank"]
    Open link in a same window or in a new tab. Values are “self” OR “blank”.

  • Order:
    [slick-slider order="DESC"]
    Controls slides order. Values are “ASC” OR “DESC”.

  • Order By:
    [slick-slider orderby="date"]
    Display slides in your order. Values are “date”, “modified”, “title” (Post Title), “ID”, “rand” (Random), “menu_order” (Sort Order).

  • Exclude Category:
    [slick-slider exclude_cat="1,5,6"]
    Exclude some slider category which you do not want to display.

  • Exclude Post:
    [slick-slider exclude_post="1,5,6"]
    Exclude some slides which you do not want to display.

  • Display Specific Posts:
    [slick-slider posts="1,5,6"]
    Display only specific slides.

  • Slider Nav Column:
    [slick-slider slider_nav_column="3"]
    Number of columns for slider navigation. Only applicable to Design 4,5,6.

Use Following parameters with shortcode

[slick-carousel-slider]

  • Limit:
    [slick-carousel-slider limit="8"]
    Limit define the number of slides to be display at a time. By default set to “15”. if you want to display all images then set limit to limit=”-1″.

  • Design:
    [slick-carousel-slider design="prodesign-1"]
    Designs are prodesign-1 to prodesign-30.

  • Category:
    [slick-carousel-slider category="category_ID"]
    Display slider by their category ID.

  • Include Cat Child:
    [slick-carousel-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.

  • Image Display Size:
    [slick-carousel-slider image_size="large"]
    Display appropriate image size from WordPress. Default is “large”. Values are thumbnail, medium, large, original.

  • Slides Column:
    [slick-carousel-slider slidestoshow="3"]
    Display number of slides at a time in slider.

  • Slides to Scroll:
    [slick-carousel-slider slidestoscroll="1"]
    Scroll number of slides at a time.

  • Show Content:
    [slick-carousel-slider show_content="true"]
    Display content OR not. By default value is “true”. Options are “true OR false”.

  • Slider Loop:
    [slick-carousel-slider loop="true"]
    Create a Infinite loop sliding. By default value is “true”. Options are “true OR false”.

  • Slider Pagination and Arrows:
    [slick-carousel-slider dots="false" arrows="false"]
    Display slider arrows or not and Display slider pagination dots or not. By default values of dots and arrows are “false”.

  • Arrows Design:
    [slick-carousel-slider arrow_design="design-2"]
    Choose slider arrow design. Designs are design-1 to design-8.

  • Dots Design:
    [slick-carousel-slider dots_design="design-2"]
    Choose slider dots design. Designs are design-1 to design-12.

  • Autoplay:
    [slick-carousel-slider autoplay="true"]
    Start slider automatically. Values are “true” OR “false”.

  • Autoplay Interval:
    [slick-carousel-slider autoplay_interval="3000"]
    Delay between two slides.

  • Slide Speed:
    [slick-carousel-slider speed="3000"]
    Display slider speed.

  • Center Mode:
    [slick-carousel-slider centermode="true"]
    Enables centered view with partial previous/next slides. Use with odd numbered slidesToShow counts and slides_to_scroll=”1″. By default value is “false”.

  • Variable Width:
    [slick-carousel-slider variablewidth="true"]
    Variable width of images in slider. By default value us “false”.

  • Show Read More:
    [slick-carousel-slider show_read_more="false"]
    Show/Hide read more links. Values are “true” and “false”.

  • Read More Text:
    [slick-carousel-slider read_more_text="More"]
    Control read more button text.

  • Link Target:
    [slick-carousel-slider link_target="blank"]
    Open link in a same window or in a new tab. Values are “self” OR “blank”.

  • Order:
    [slick-carousel-slider order="DESC"]
    Controls slides order. Values are “ASC” OR “DESC”.

  • Order By:
    [slick-carousel-slider orderby="date"]
    Display slides in your order. Values are “date” (Post Date), “modified” (Post Modified Date), “title” (Post Title), “ID”, “rand” (Random), “menu_order” (Sort Order).

  • Exclude Category:
    [slick-carousel-slider exclude_cat="1,5,6"]
    Exclude some slider category which you do not want to display.

  • Exclude Post:
    [slick-carousel-slider exclude_post="1,5,6"]
    Exclude some slides which you do not want to display.

  • Display Specific Posts:
    [slick-carousel-slider posts="1,5,6"]
    Display only specific slides.

  • Slider Height:
    [slick-carousel-slider sliderheight="400"]
    Set Carousel Slider height.

Use Following parameters with shortcode

[slick-variable-slider]

  • Limit:
    [slick-variable-slider limit="8"]
    Limit define the number of slides to be display at a time. By default set to “15”. if you want to display all images then set limit to limit=”-1″.

  • Design:
    [slick-variable-slider design="prodesign-1"]
    Designs are prodesign-1 to prodesign-33.

  • Category:
    [slick-variable-slider category="category_ID"]
    Display slider by their category ID.

  • Include Cat Child:
    [slick-variable-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.

  • Image Display Size:
    [slick-carousel-slider image_size="large"]
    Display appropriate image size from WordPress. Default is “full”. Values are thumbnail, medium, large, full.

  • Show Content:
    [slick-variable-slider show_content="true"]
    Display content OR not. By default value is “true”. Options are “true OR false”.

  • Slider Loop:
    [slick-variable-slider loop="true"]
    Create a Infinite loop sliding. By default value is “true”. Options are “true OR false”.

  • Slider Pagination and Arrows:
    [slick-variable-slider dots="false" arrows="false"]
    Display slider arrows or not and Display slider pagination dots or not. By default values of dots and arrows are “false”.

  • Arrows Design:
    [slick-variable-slider arrow_design="design-2"]
    Choose slider arrow design. Designs are design-1 to design-8.

  • Dots Design:
    [slick-variable-slider dots_design="design-2"]
    Choose slider dots design. Designs are design-1 to design-12.

  • Autoplay:
    [slick-variable-slider autoplay="true"]
    Start slider automatically. Values are “true” OR “false”.

  • Autoplay Interval:
    [slick-variable-slider autoplay_interval="3000"]
    Delay between two slides.

  • Slider Speed:
    [slick-variable-slider speed="3000"]
    Control speed of slider.

  • Slider Height:
    [slick-variable-slider sliderheight="400"]
    Set Slider height. By default given 400px height.

  • Show Read More:
    [slick-variable-slider show_read_more="false"]
    Show/Hide read more links. Values are “true” and “false”.

  • Read More Text:
    [slick-variable-slider read_more_text="More"]
    Control read more button text.

  • Link Target:
    [slick-variable-slider link_target="blank"]
    Open link in a same window or in a new tab. Values are “self” OR “blank”.

  • Order:
    [slick-variable-slider order="DESC"]
    Controls slides order. Values are “ASC” OR “DESC”.

  • Order By:
    [slick-variable-slider orderby="date"]
    Display slides in your order. Values are “date”, “modified”, “title” (Post Title), “ID”, “rand” (Random), “menu_order” (Sort Order).

  • Exclude Category:
    [slick-variable-slider exclude_cat="1,5,6"]
    Exclude some slider category which you do not want to display.

  • Exclude Post:
    [slick-variable-slider exclude_post="1,5,6"]
    Exclude some slides which you do not want to display.

  • Display Specific Posts:
    [slick-variable-slider posts="1,5,6"]
    Display only specific slides.

Slick Slider with Custom Order

You can display Slick Slider in custom order with Drag & Drop interface. Click on ‘Sort slides link on Slick Slider listing page, Drag FAQ’s row and click the ‘Save Sort Order’ button to save.
slick-slider

Note: Put orderby='menu_order' order="ASC" parameter in Slick Slider shortcode for custom ordering.