WP Slick Slider and Image Carousel Pro

Getting Started

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

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 and Image Carousel pro just need to follow few steps.

  1. Go to Slick Slider Pro tab and click on add slide
  2. Add Image title, content, read more link and featured image and update
  3. 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

how to add a slide

Read More Link : Enter a slider read more link. e.g. https://www.essentialplugin.com/

Read More Text : Enter a slider read more button text. Leave it empty for default text.

category shortcode

If you want to display category wise slider then you need to pass category id in plugin shortcode. e.g. [slick-slider category=”XX”] – where XX is your category ID.

You can find category ID at browser URL while edit the particular 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.
WP Slick Slider and Image Carousel Pro contain three shortcodes.

Slick Slider

[slick-slider]

Slick Carousel Slider

[slick-carousel-slider]

Variable Width

[slick-variable-slider]

You can also use template code to display image slider in your theme template.
<?php echo do_shortcode('[slick-slider]'); ?>
<?php echo do_shortcode('[slick-carousel-slider]'); ?>
<?php echo do_shortcode('[slick-variable-slider]'); ?>

Parameters for Slick Slider

[slick-slider]

  • Limit:
    [slick-slider limit="15"]
    Define the number of slides to be display at a time. You can display all slides using limit=”-1″
  • Design:
    [slick-slider design="prodesign-1"]
    Set Slick Slider Designs. We have provided 30 pro designs.
  • Category:
    [slick-slider category="1,2,3"]
    Display slider by specific category ID. You can pass multiple ids by comma separated.
  • Display Child Category:
    [slick-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.
  • Show Title:
    [slick-slider show_title="true"]
    Display Slider Title. Values are “true” OR “false”.
  • Show Content:
    [slick-slider show_content="true"]
    Display Slider Content. Values are “true” OR “false”.
  • Image Size:
    [slick-slider image_size="large"]
    Set slider image size. Values are “original”, “large”, “medium”, “thumbnail”.
  • Image Fit:
    [slick-slider image_fit="true"]
    Set image fit to box or not. Values are “false” OR “true”.
  • Slider Loop:
    [slick-slider loop="true"]
    Create a Infinite loop sliding. Values are “true” OR “false”.
  • Hover Pause
    [slick-slider hover_pause="true"]
    Pause slider autoplay on hover. Values are “true” OR “false”.
  • Focus Pause
    [slick-slider focus_pause="false"]
    Pause slider autoplay when slider element is focused. Values are “true” OR “false”.
  • Slider Dots:
    [slick-slider dots="false"]
    Display slider dots(pagination). Values are “true” OR “false”.
  • Slider Arrows:
    [slick-slider arrows="true"]
    Display slider arrows. Values are “true” OR “false”.
  • Arrows Design:
    [slick-slider arrow_design="design-2"]
    Choose slider arrow design. We have provided 8 designs.
  • Dots Design:
    [slick-slider dots_design="design-2"]
    Choose slider dots design. We have provided 12 designs.
  • Autoplay:
    [slick-slider autoplay="false"]
    Set slider automatically slide. Values are “true” OR “false”.
  • Autoplay Interval:
    [slick-slider autoplay_interval="3000"]
    Delay between two slides.
  • Slider Speed:
    [slick-slider speed="300"]
    Set speed of slider.
  • Fade:
    [slick-slider fade="false"]
    Set slider fade Effect. Values are “true” OR “false”.
  • Slider Height:
    [slick-slider sliderheight="400"]
    Set Slider height. You can enter any numeric value.
  • Show Read More:
    [slick-slider show_read_more="true"]
    Display read more button. Values are “true” OR “false”.
  • Read More Text:
    [slick-slider read_more_text="View More"]
    Change read more button text with your Desired text.
  • Link Target:
    [slick-slider link_target="blank"]
    Open link in a same tab OR 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 slider category id which you do not want to display. You can pass multiple ids by comma separated.
  • Exclude Post:
    [slick-slider exclude_post="1,5,6"]
    Exclude slides id which you do not want to display. You can pass multiple ids by comma separated.
  • Display Specific Posts:
    [slick-slider posts="1,5,6"]
    Display only specific slides. You can pass multiple ids by comma separated.
  • Slider Nav Thumbnail :
    [slick-slider slider_nav="false"]
    Enable to slider navigation thumbnail. Default value false.
  • Slider Nav Column:
    [slick-slider slider_nav_column="3"]
    Number of columns for slider navigation.
  • Query Offset:
    [slick-slider query_offset="5"]
    This will hide first five post. e.g. I have set offset 5 then it will skip first five post.
    Note: This will not work with limit=”-1″.
  • Slider Lazyload:
    [slick-slider lazyload=""]
    Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
  • Extra Class:
    [slick-slider extra_class=""]
    You can add extra class.
    Note: Extra class added as parent so using extra class you customize your design.

Parameters for Slick Carousel

[slick-carousel-slider]

  • Limit:
    [slick-carousel-slider limit="15"]
    Define the number of slides to be display at a time. You can display all slides using limit=”-1″.
  • Design:
    [slick-carousel-slider design="prodesign-1"]
    Set Carousel slider designs. We have provided 30 pro designs.
  • Category:
    [slick-carousel-slider category="1,2,3"]
    Display slider by specific category ID. You can pass multiple ids by comma separated.
  • Display Child Category:
    [slick-carousel-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.
  • Image Size:
    [slick-carousel-slider image_size="large"]
    Set image size.  Values are “thumbnail”, “medium”, “large”, “original”.
  • Image Fit:
    [slick-carousel-slider image_fit="true"]
    Set image fit to box or not. Values are “false” OR “true”.
  • Slides to Scroll:
    [slick-carousel-slider slidestoscroll="1"]
    Scroll number of slides at a time.
  • Show Title:
    [slick-carousel-slider show_title="true"]
    Display carousel title. Values are “true” OR “false”.
  • Show Content:
    [slick-carousel-slider show_content="true"]
    Display carousel content. Values are “true” OR “false”.
  • Slider Loop:
    [slick-carousel-slider loop="true"]
    Create a Infinite loop sliding. Values are “true” OR “false”.
  • Hover Pause
     [slick-carousel-slider hover_pause="true"]
    Pause slider autoplay on hover. Values are “true” OR “false”.
  • Focus Pause
     [slick-carousel-slider focus_pause="false"]
    Pause slider autoplay when slider element is focused. Values are “true” OR “false”.
  • Slider Dots:
    [slick-carousel-slider dots="true"]
    Display slick carousel pagination or not. Values are “true” OR “false”.
  • Slider Arrows:
    [slick-carousel-slider arrows="true"]
    Display slick carousel arrows or not. Values are “true” OR “false”.
  • Arrows Design:
    [slick-carousel-slider arrow_design="design-2"]
    Choose slider arrow design. We have provided 8 designs.
  • Dots Design:
    [slick-carousel-slider dots_design="design-2"]
    Choose slider dots design. We have provided 12 designs.
  • 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="300"]
    Display slider speed.
  • Slide Show:
    [slick-carousel-slider slidestoshow="3"]
    Display carousel in columns or grid view.
  • Center Mode:
    [slick-carousel-slider centermode="true"]
    Set Slider center mode effect. Values are “true” OR “false”.
  • Center Padding:
    [slick-carousel-slider center_padding="0"]
    Center padding takes padding from left and right side.
  • 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="View More"]
    Change read more button text with your Desired text.
  • Link Target:
    [slick-carousel-slider link_target="self"]
    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. You can pass multiple ids by comma separated.
  • Exclude Post:
    [slick-carousel-slider exclude_post="1,5,6"]
    Exclude some slides which you do not want to display. You can pass multiple ids by comma separated.
  • Display Specific Posts:
    [slick-carousel-slider posts="1,5,6"]
    Display only specific slides. You can pass multiple ids by comma separated.
  • Slider Height:
    [slick-carousel-slider sliderheight="400"]
    Set Carousel Slider height.
  • Query Offset :
    [slick-carousel-slider query_offset="5"]
    This will hide first five post. e.g. I have set offset 5 then it will skip first five post.
    Note: This will not work with limit=-1.
  • Slider Lazyload
    [slick-carousel-slider lazyload=""]
    Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
  • Extra Class:
    [slick-carousel-slider extra_class=""]
    You can add extra class.
    Note: Extra class added as parent so using extra class you customize your design.

Parameters for Slick Variable Width

[slick-variable-slider]

  • Limit:
    [slick-variable-slider limit="15"]
    Define the number of slides to be display at a time. You can display all slides using limit=”-1″.
  • Design:
    [slick-variable-slider design="prodesign-1"]
    Set slick variable slider design. We have provided 33 designs.
  • Category:
    [slick-variable-slider category="1,2,3"]
    Display slider by specific category ID. You can pass multiple ids by comma separated.
  • Display Child Category:
    [slick-variable-slider include_cat_child="true"]
    Display child category slides. Values are “true” OR “false”.
  • Image Size:
    [slick-variable-slider image_size="large"]
    Set image size. Values are “thumbnail”, “medium”, “large”.
  • Image Fit:
    [slick-variable-slider image_fit="true"]
    Set image fit to box or not. Values are “false” OR “true”.
  • Show Content:
    [slick-variable-slider show_content="true"]
    Display slider content. Values are “true” OR “false”.
  • Show Title:
    [slick-variable-slider show_title="true"]
    Display slider title. Values are “true” OR “false”.
  • Slider Loop:
    [slick-variable-slider loop="true"]
    Create a Infinite loop sliding. Values are “true” OR “false”.
  • Hover Pause
    [slick-variable-slider hover_pause="true"]
    Pause slider autoplay on hover. Values are “true” OR “false”.
  • Focus Pause
    [slick-variable-slider focus_pause="false"]
    Pause slider autoplay when slider element is focused. Values are “true” OR “false”.
  • Slider Dots:
    [slick-variable-slider dots="true"]
    Display slick variable pagination. Values are “true” OR “false”.
  • Slider Arrows:
    [slick-variable-slider arrows="true"]
    Display slick variable slider arrows. Values are “true” OR “false”.
  • Arrows Design:
    [slick-variable-slider arrow_design="design-2"]
    Choose slider arrow design. We have provided 8 designs.
  • Dots Design:
    [slick-variable-slider dots_design="design-2"]
    Choose slider dots design. We have provided 12 designs.
  • Center Width:
    [slick-variable-slider center_width="70%"]
    You can set center image width. You can set in Percentage or PX(pixel).
  • Variable Width:
    [slick-variable-slider var_width="true"]
    Display slider with variable width. Values are “true” OR “false”.
    Note : This parameter will not work properly with following designs : 17 to 21, 23 to 30
  • 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. You can enter numeric values.
  • Slider Speed:
    [slick-variable-slider speed="300"]
    Control speed of slider.
  • Slider Height:
    [slick-variable-slider sliderheight="400"]
    Set Slider height for variable width.
  • Show Read More:
    [slick-variable-slider show_read_more="true"]
    Display read more button. Values are “true” and “false”.
  • Read More Text:
    [slick-variable-slider read_more_text="View More"]
    Change read more button text with your Desired text.
  • Link Target:
    [slick-variable-slider link_target="self"]
    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. You can pass multiple ids by comma separated.
  • Exclude Post:
    [slick-variable-slider exclude_post="1,5,6"]
    Exclude some slides which you do not want to display. You can pass multiple ids by comma separated.
  • Display Specific Posts:
    [slick-variable-slider posts="1,5,6"]
    Display only specific slides. You can pass multiple ids by comma separated.
  • Query Offset :
    [slick-variable-slider query_offset="5"]
    This will hide first five post. e.g. I have set offset 5 then it will skip first five post.
    Note: This will not work with limit=-1.
  • Slider Lazyload
    [slick-variable-slider lazyload=""]
    Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
  • Extra Class:
    [slick-variable-slider extra_class=""]
    You can add extra class here.
    Note: Extra class added as parent so using extra class you customize your design.

Shortcode Builder

Check the result of any shortcode with live preview using “Shortcode Builder”
Please navigate to admin > Slick Slider Pro > Shortcode Builder.

Gutenberg Blocks

WP Slick Slider and Image Carousel Pro plugin have three Gutenberg Blocks,

  1. Slick Slider
  2. Slick Carousel Slider
  3. Slick Variable Slider

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 slides row and click the ‘Save Sort Order’ button to save.

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

Template Structure + Overriding templates via a theme

The template files of WP Slick Slider and Image Carousel Pro contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves.

This method protects even further against any upgrade issues as the template files can be left completely untouched.

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /wp-slick-slider-and-image-carousel-pro, keeping the same file structure.

Example : To override the slider design file simply copy file from /wp-slick-slider-and-image-carousel-pro/templates/slider/prodesign-1.php to yourtheme/wp-slick-slider-and-image-carousel-pro/slider/prodesign-1.php

The copied file will now override the WP Slick Slider and Image Carousel Pro default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customization will be lost.

The following template files can be found within the /wp-slick-slider-and-image-carousel-pro/templates/ directory:

  • Click Here To See Template Hierarchy
      slider
    • prodesign-1.php to prodesign-30.php
    • loop-start.php
    • loop-end.php
      nav
    • nav-design.php
    • nav-item.php
      carousel
    • prodesign-1.php to prodesign-30.php
    • loop-start.php
    • loop-end.php
      variable-width
    • prodesign-1.php to prodesign-33.php
    • loop-start.php
    • loop-end.php
  1. Plugin Installation
  2. How to Activate License Key and Update
  3. Plugin not Updating – Getting an Error Unauthorized
View Demo
Buy Now