Getting started
WP Slick Slider and Image Carousel adds a Menu tab in WP Admin side with the name “Slick Slider” where you can add new Image Title, Content, Link and Image as a featured image, edit and delete.
Screen shows “Slick Slider” 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 just need to follow few steps.
- Go to Slick Slider 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
Bellow screen shows how to add a Image for image slider
If you want to display category wise then go to Slick Slider -> Slider Category and select the shortcode.
Bellow screen show category shortcode
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 contain 2 shortcode.
[sick-slider]
[slick-carousel-slider]
You can also use template code.
<?php echo do_shortcode('[slick-slider]'); ?><?php echo do_shortcode('[slick-carousel-slider]'); ?>
Parameters for Slick Slider:
[slick-slider]
-
DESIGN:
[slick-slider design="design-1"]
Select the Slider design.Design-1, Design-2, Design-3, Design-4, Design-5. -
PAGINATION AND ARROWS:
[slick-slider dots="true" arrows="true"]
Display slider arrows or not and Display slider pagination dots or not. By default values of dots and arrows are “false”. -
AUTOPLAY AND AUTOPLAY INTERVAL:
[slick-slider autoplay="true" autoplay_interval="3000"]
Display slider autoplay or not and autoplay interval time. By default autoplay value is “true” and default interval time is “100″. -
SLIDE SPEED:
[slick-slider speed="300"]
Display slider speed. -
LIMIT:
[slick-slider limit="-1"]
Limit define the number of images to be display at a time. By default set to “-1″ all images.If you want to display only 5 images then set limit to limit=”5″. -
CATEGORY:
[slick-slider category="5,10,15"]
Display slider by their category ID. You can pass multiple ids by comma separated. -
SHOW CONTENT:
[slick-slider show_content="true"]
Display content OR not. By default value is “True”. Options are “true OR false”. -
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. -
IMAGE SIZE:
[slick-slider image_size="large"]
Default is “full”, values are thumbnail, medium, medium_large, large, full. -
IMAGE FIT:
[slick-slider image_fit="true" ]
Set image fit to box or not. By default value is “True”. Options are “true OR false”.
Note: image_fit=”true” work better if sliderheight is given. if image_fit=”false”, no need to use sliderheight parameter. -
SLIDER HEIGHT:
[slick-slider sliderheight="400"]
You can set slider height.
Note: This parameter work better if image_fit=”true”. -
SLIDER LOOP:
[slick-slider loop="true" ]
Create a Infinite loop sliding. By default value is “true”. Options are “true” OR “false”. -
HOVER PAUSE:
[slick-slider hover_pause="true"]
Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”. -
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. -
RTL:
[slick-slider rtl="true"]
For rtl mode. By default value is “false”. Options are “true OR false”
Parameteres for Slick Slider Carousel:
[slick-carousel-slider]
-
LIMIT:
[slick-carousel-slider limit="-1"]
Limit define the number of images to be display at a time. By default set to “-1″ all images. -
DESIGN:
[slick-carousel-slider design="design-1"]
You can use only design-1 for Slick Slider Carousel. -
CATEGORY:
[slick-carousel-slider category="5,10,15"]
Display slider by their category ID. You can pass multiple ids by comma separated. -
IMAGE SIZE:
[slick-carousel-slider image_size="large"]
Default is “medium”, values are thumbnail, medium, large, original. -
SLIDES SCROLL::
[slick-carousel-slider slidestoscroll="1"]
Scroll number of images at a time. By default value is “1″. -
SLIDES TO SHOW:
[slick-carousel-slider slidestoshow="3"]
Display number of images at a time. By default value is “3″. -
PAGINATION AND ARROWS:
[slick-carousel-slider dots="true" arrows="true"]
Display slider arrows or not and Display slider pagination dots or not. By default values of dots and arrows are “false”. -
AUTOPLAY AND AUTOPLAY INTERVAL:
[slick-carousel-slider autoplay="true" autoplay_interval="3000"]
Display slider autoplay or not and autoplay interval time. By default autoplay value is “true” and default interval time is “100″. -
SLIDE SPEED:
[slick-carousel-slider speed="300"]
Set slider speed. -
CENTER MODE:
[slick-carousel-slider centermode="true"]
Display main image on center. By default value is “false”. -
VARIABLE WIDTH:
[slick-carousel-slider variablewidth="false"]
Variable width of images in slider. By default value is “false”.
Note: This will not work with slidestoshow and variablewidth=”true” parameter. -
IMAGE FIT:
[slick-carousel-slider image_fit="true" ]
Image_fit parameter is used to specify how an image should be resized to fit its container. By default value is “True”. Options are “true OR false”.
Note: image_fit=”true” work better if sliderheight is given. if image_fit=”false”, no need to use sliderheight parameter. -
SLIDER HEIGHT:
[slick-carousel-slider sliderheight="400"]
You can set slider height.
Note: This parameter work better if image_fit=”true”. -
SLIDER LOOP:
[slick-carousel-slider loop="true" ]
Create a Infinite loop sliding. By default value is “true”. Options are “true” OR “false”. -
HOVER PAUSE:
[slick-carousel-slider hover_pause="true"]
Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”. -
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. -
RTL:
[slick-carousel-slider rtl="true"]
For rtl mode. By default value is “false”. Options are “true OR false”.