Below, you’ll find a detailed guide on how to add the WP Slick Slider and Image Carousel Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Slick Slider and Image Carousel Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WP Slick Slider and Image Carousel Plugin and the shortcodes it provides:
"WP Slick Slider and Image Carousel is a dynamic WordPress plugin, ideal for creating captivating image slideshows and carousels on your website in a slick and professional manner."
- [slick-carousel-slider]
- [slick-slider]
WP Slick Slider and Image Carousel [slick-carousel-slider] Shortcode
The ‘wp-slick-slider-and-image-carousel’ shortcode allows you to create a customizable carousel slider on your WordPress site. The shortcode uses various attributes like ‘limit’, ‘category’, ‘design’, ‘image_size’, etc. to modify the slider’s appearance and functionality. It also includes compatibility with SiteOrigin Page Builder, Divi Frontend Builder, and Fusion Builder Live Editor. The slider supports RTL languages and lazy loading, making it versatile and efficient. It also provides an autoplay feature with customizable speed and interval settings. In essence, this shortcode provides a comprehensive solution for adding a slick carousel slider to your WordPress site.
Shortcode: [slick-carousel-slider]
Parameters
Here is a list of all possible slick-carousel-slider shortcode parameters and attributes:
limit– Determines the number of slides to be displayed.category– Filters slides based on their assigned category.design– Chooses the design template for the carousel.image_size– Defines the size of the images in the carousel.slidestoshow– Specifies the number of slides visible at one time.slidestoscroll– Determines the number of slides to scroll at once.dots– Enables or disables the navigation dots below the carousel.arrows– Enables or disables the navigation arrows of the carousel.autoplay– Turns on or off the autoplay feature of the carousel.loop– Determines whether the carousel should loop back to the start after the last slide.hover_pause– Decides if the carousel should pause when hovered over.autoplay_interval– Sets the time duration between each slide in autoplay.speed– Adjusts the speed of the slide transition.centermode– Enables or disables the center mode feature.variablewidth– Allows for variable width of slides.image_fit– Controls whether the images should fit within the slide.sliderheight– Sets the height of the slider.lazyload– Enables or disables lazy loading of images.rtl– Changes the orientation of the carousel for right-to-left languages.extra_class– Adds additional CSS classes to the carousel.className– Assigns a class name to the carousel.align– Aligns the carousel to the center, left or right.dev_param_1– Developer parameter for additional customization.dev_param_2– Second developer parameter for further customization.
Examples and Usage
Basic example – Utilizing the shortcode to display a carousel slider with default settings.
[slick-carousel-slider]Advanced examples
Deploying the shortcode to display a carousel slider with a specified limit of images, a selected category, and a chosen design template. The slider will show 5 images from the ‘travel’ category, using the ‘design-2’ template.
[slick-carousel-slider limit=5 category='travel' design='design-2']Using the shortcode to customize the carousel slider further by specifying the number of slides to show and scroll, controlling the navigation options, and setting the autoplay feature. This slider will display 3 images at a time, scroll 1 image per action, show navigation dots and arrows, and will autoplay the images.
[slick-carousel-slider slidestoshow=3 slidestoscroll=1 dots='true' arrows='true' autoplay='true']Implementing the shortcode to create a highly customized carousel slider by adjusting the autoplay interval, speed of transition, center mode, and lazyload options. This slider will change images every 2 seconds, transition speed will be 500 milliseconds, the center mode will be enabled, and the images will load on demand.
[slick-carousel-slider autoplay_interval=2000 speed=500 centermode='true' lazyload='ondemand']PHP Function Code
In case you have difficulties debugging what causing issues with [slick-carousel-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'slick-carousel-slider','wpsisac_get_carousel_slider' );Shortcode PHP function:
function wpsisac_get_carousel_slider( $atts, $content = null ){
// Taking some
global $post;
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return "[slick-carousel-slider]";
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="wpsisac-builder-shrt-prev">
<div class="wpsisac-builder-shrt-title"><span>'.esc_html__('Slick Carousel View', 'wp-slick-slider-and-image-carousel').'</span></div>
slick-carousel-slider
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="wpsisac-builder-shrt-prev">
<div class="wpsisac-builder-shrt-title"><span>'.esc_html__('Slick Carousel View', 'wp-slick-slider-and-image-carousel').'</span></div>
slick-carousel-slider
</div>';
}
// Shortcode Parameter
extract(shortcode_atts(array(
'limit' => -1,
'category' => '',
'design' => 'design-1',
'image_size' => 'full',
'slidestoshow' => 3,
'slidestoscroll' => 1,
'dots' => 'true',
'arrows' => 'true',
'autoplay' => 'true',
'loop' => 'true',
'hover_pause' => 'true',
'autoplay_interval' => 3000,
'speed' => 300,
'centermode' => 'false',
'variablewidth' => 'false',
'image_fit' => 'false',
'sliderheight' => '',
'lazyload' => '',
'rtl' => '',
'extra_class' => '',
'className' => '',
'align' => '',
'dev_param_1' => '',
'dev_param_2' => '',
), $atts, 'slick-carousel-slider'));
$shortcode_designs = wpsisac_carousel_designs();
$limit = ! empty( $limit ) ? $limit : '-1';
$cat = ! empty( $category ) ? explode( ',', $category ) : '';
$slidestoshow = ! empty( $slidestoshow ) ? $slidestoshow : 3;
$slidestoscroll = ! empty( $slidestoscroll ) ? $slidestoscroll : 1;
$design = ( $design && ( array_key_exists( trim( $design ), $shortcode_designs )) ) ? trim( $design ) : 'design-1';
$dots = ( $dots == 'false' ) ? 'false' : 'true';
$arrows = ( $arrows == 'false' ) ? 'false' : 'true';
$autoplay = ( $autoplay == 'false' ) ? 'false' : 'true';
$loop = ( $loop == 'false' ) ? 'false' : 'true';
$hover_pause = ( $hover_pause == 'false' ) ? 'false' : 'true';
$autoplay_interval = ! empty( $autoplay_interval ) ? $autoplay_interval : 3000;
$speed = ! empty( $speed ) ? $speed : 300;
$sliderheight = ! empty( $sliderheight ) ? $sliderheight : '';
$slider_height_css = ! empty( $sliderheight ) ? "height:{$sliderheight}px;" : '';
$lazyload = ( $lazyload == 'ondemand' || $lazyload == 'progressive' ) ? $lazyload : ''; // ondemand or progressive
$image_fit = ( $image_fit == 'false' ) ? 0 : 1;
$centermode = ( $centermode == 'false' ) ? 'false' : 'true';
$variablewidth = ( $variablewidth == 'false' ) ? 'false' : 'true';
$image_size = ! empty( $image_size ) ? $image_size : 'full';
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = wpsisac_get_sanitize_html_classes( $extra_class );
$dev_param_1 = ! empty( $dev_param_1 ) ? $dev_param_1 : '';
$dev_param_2 = ! empty( $dev_param_2 ) ? $dev_param_2 : '';
// For RTL
if( empty( $rtl ) && is_rtl() ) {
$rtl = 'true';
} elseif ( $rtl == 'true' ) {
$rtl = 'true';
} else {
$rtl = 'false';
}
// Shortcode file
$design_file_path = WPSISAC_DIR . '/templates/carousel/' . $design . '.php';
$design_file = ( file_exists( $design_file_path ) ) ? $design_file_path : '';
// Enqueus required script
wp_enqueue_script( 'wpos-slick-jquery' );
wp_enqueue_script( 'wpsisac-public-script' );
// Taking some variables
$image_fit_class = ( $image_fit ) ? 'wpsisac-image-fit' : '';
// Slider configuration
$slider_conf = compact( 'slidestoshow','slidestoscroll','dots', 'arrows', 'autoplay', 'autoplay_interval', 'speed', 'rtl', 'centermode' , 'lazyload', 'variablewidth', 'loop', 'hover_pause' );
ob_start();
// Taking some variables
$unique = wpsisac_get_unique();
$post_type = WPSISAC_POST_TYPE;
$orderby = 'post_date';
$order = 'DESC';
// WP Query Parameters
$args = array (
'post_type' => $post_type,
'orderby' => $orderby,
'order' => $order,
'posts_per_page' => $limit,
);
// Category Parameter
if( $cat != "" ){
$args['tax_query'] = array(
array(
'taxonomy' => 'wpsisac_slider-category',
'field' => 'term_id',
'terms' => $cat
)
);
}
// WP Query Parameters
$query = new WP_Query( $args );
$post_count = $query->post_count;
// If post is there
if ( $query->have_posts() ) : ?>
<div class="wpsisac-slick-carousal-wrp wpsisac-clearfix <?php echo esc_attr( $extra_class ); ?>" data-conf="<?php echo htmlspecialchars( json_encode( $slider_conf )); ?>">
<div id="wpsisac-slick-carousal-<?php echo esc_attr( $unique ); ?>" class="wpsisac-slick-init wpsisac-slick-carousal <?php echo esc_attr( $design ); ?> <?php echo esc_attr( $image_fit_class ); ?> <?php if( $centermode == 'true' && $variablewidth == 'true' ) { echo 'wpsisac-center variablewidthv'; } elseif( $centermode == 'true' ) { echo 'wpsisac-center';} else { echo 'simplecarousal';} ?>">
<?php while ( $query->have_posts() ) : $query->the_post();
$sliderurl = get_post_meta( $post->ID,'wpsisac_slide_link', true );
$slider_orig_img = wpsisac_get_post_featured_image( $post->ID, $image_size, true );
$slider_img = $slider_orig_img;
if ( $lazyload ) {
$slider_img = WPSISAC_URL.'assets/images/spacer.gif';
}
// Include shortcode html file
if( $design_file ) {
include( $design_file );
}
endwhile; ?>
</div>
</div>
<?php
endif;
wp_reset_postdata(); // Reset WP Query
return ob_get_clean();
}
Code file location:
wp-slick-slider-and-image-carousel/wp-slick-slider-and-image-carousel/includes/shortcodes/wpsisac-carousel.phpWP Slick Slider and Image Carousel [slick-slider] Shortcode
The Slick Slider shortcode is a powerful feature of the wp-slick-slider-and-image-carousel plugin. It enables the display of a slick slider on any page or post. The shortcode also allows customization of the slider with various parameters such as limit, category, design, image size, and more. It also includes compatibility checks for SiteOrigin Page Builder, Divi Frontend Builder, and Fusion Builder. In these cases, it returns a slider preview instead of the actual slider. Shortcode: add_shortcode( ‘slick-slider’,’wpsisac_get_slick_slider’ ) The shortcode is highly versatile, making it easy to include a slick slider in your WordPress content.
Shortcode: [slick-slider]
Parameters
Here is a list of all possible slick-slider shortcode parameters and attributes:
limit– defines the total number of slides to display.category– allows you to display slides from a specific category.design– select the design template for the slider.image_size– defines the size of the images in the slider.show_content– toggles whether to display content in the slider.dots– toggles whether to show navigation dots under the slider.arrows– toggles whether to show navigation arrows on the slider.autoplay– toggles whether the slides will change automatically.loop– toggles whether the slider will loop back to the start when it reaches the end.hover_pause– toggles whether the slider will pause when hovered over.autoplay_interval– sets the time interval between automatic slide changes.speed– sets the speed of the slide transition.fade– toggles whether the slides will fade in and out.sliderheight– sets the height of the slider.image_fit– toggles whether the images will fit to the slider size.lazyload– sets the type of lazy loading for images.rtl– toggles whether the slider will be right-to-left.extra_class– allows adding additional CSS classes to the slider.className– allows adding a CSS class to the slider.align– sets the alignment of the slider.dev_param_1– custom parameter for development purposes.dev_param_2– custom parameter for development purposes.
Examples and Usage
Basic example – Display a slick slider with the default settings.
[slick-slider]Advanced examples
Display a slick slider with a specific category and limit the number of posts.
[slick-slider category="5" limit="10"]Display a slick slider with a specific design, image size, and disable content display.
[slick-slider design="design-2" image_size="medium" show_content="false"]Display a slick slider with specific navigation settings, autoplay interval, and speed.
[slick-slider dots="false" arrows="true" autoplay="true" autoplay_interval="5000" speed="500"]Display a slick slider with a specific height, image fit, and lazy load settings.
[slick-slider sliderheight="500" image_fit="true" lazyload="ondemand"]Display a slick slider with a specific alignment and extra CSS classes.
[slick-slider align="center" extra_class="my-custom-class"]Display a slick slider with developer parameters.
[slick-slider dev_param_1="value1" dev_param_2="value2"]PHP Function Code
In case you have difficulties debugging what causing issues with [slick-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'slick-slider','wpsisac_get_slick_slider' );Shortcode PHP function:
function wpsisac_get_slick_slider( $atts, $content = null ){
// Taking some global
global $post;
// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
return "[slick-slider]";
}
// Divi Frontend Builder - Do not Display Preview
if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
return '<div class="wpsisac-builder-shrt-prev">
<div class="wpsisac-builder-shrt-title"><span>'.esc_html__('Slick Slider View', 'wp-slick-slider-and-image-carousel').'</span></div>
slick-slider
</div>';
}
// Fusion Builder Live Editor - Do not Display Preview
if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
return '<div class="wpsisac-builder-shrt-prev">
<div class="wpsisac-builder-shrt-title"><span>'.esc_html__( 'Slick Slider View', 'wp-slick-slider-and-image-carousel' ).'</span></div>
slick-slider
</div>';
}
// Shortcode Parameter
extract(shortcode_atts(array(
'limit' => -1,
'category' => '',
'design' => 'design-1',
'image_size' => 'full',
'show_content' => 'true',
'dots' => 'true',
'arrows' => 'true',
'autoplay' => 'true',
'loop' => 'true',
'hover_pause' => 'true',
'autoplay_interval' => 3000,
'speed' => 300,
'fade' => 'false',
'sliderheight' => '',
'image_fit' => 'false',
'lazyload' => '',
'rtl' => '',
'extra_class' => '',
'className' => '',
'align' => '',
'dev_param_1' => '',
'dev_param_2' => '',
), $atts, 'slick-slider' ));
$shortcode_designs = wpsisac_slider_designs();
$limit = ! empty( $limit ) ? $limit : '-1';
$cat = ! empty( $category ) ? explode( ',', $category ) : '';
$design = ( $design && ( array_key_exists( trim( $design ), $shortcode_designs )) ) ? trim( $design ) : 'design-1';
$show_content = ( $show_content == 'true' ) ? true : false;
$dots = ( $dots == 'false' ) ? 'false' : 'true';
$arrows = ( $arrows == 'false' ) ? 'false' : 'true';
$autoplay = ( $autoplay == 'false' ) ? 'false' : 'true';
$loop = ( $loop == 'false' ) ? 'false' : 'true';
$hover_pause = ( $hover_pause == 'false' ) ? 'false' : 'true';
$autoplay_interval = ! empty( $autoplay_interval ) ? $autoplay_interval : 3000;
$speed = ! empty( $speed ) ? $speed : 300;
$fade = ( $fade == 'true' ) ? 'true' : 'false';
$lazyload = ( $lazyload == 'ondemand' || $lazyload == 'progressive' ) ? $lazyload : ''; // ondemand or progressive
$image_fit = ( $image_fit == 'false' ) ? 0 : 1;
$sliderheight = ! empty( $sliderheight ) ? $sliderheight : '';
$slider_height_css = ! empty( $sliderheight ) ? "height:{$sliderheight}px;" : '';
$image_size = ! empty( $image_size ) ? $image_size : 'full';
$align = ! empty( $align ) ? 'align'.$align : '';
$extra_class = $extra_class .' '. $align .' '. $className;
$extra_class = wpsisac_get_sanitize_html_classes( $extra_class );
$dev_param_1 = ! empty( $dev_param_1 ) ? $dev_param_1 : '';
$dev_param_2 = ! empty( $dev_param_2 ) ? $dev_param_2 : '';
// For RTL
if( empty( $rtl ) && is_rtl() ) {
$rtl = 'true';
} elseif ( $rtl == 'true' ) {
$rtl = 'true';
} else {
$rtl = 'false';
}
// Shortcode file
$design_file_path = WPSISAC_DIR . '/templates/slider/' . $design . '.php';
$design_file = (file_exists( $design_file_path )) ? $design_file_path : '';
// Enqueus required script
wp_enqueue_script( 'wpos-slick-jquery' );
wp_enqueue_script( 'wpsisac-public-script' );
// Taking some variables
$image_fit_class = ( $image_fit ) ? 'wpsisac-image-fit' : '';
// Slider configuration
$slider_conf = compact('dots', 'arrows', 'autoplay', 'autoplay_interval', 'fade', 'lazyload', 'speed', 'rtl', 'loop', 'hover_pause');
ob_start();
// Taking some variables
$unique = wpsisac_get_unique();
$post_type = WPSISAC_POST_TYPE;
$orderby = 'post_date';
$order = 'DESC';
// WP Query Parameters
$args = array (
'post_type' => $post_type,
'orderby' => $orderby,
'order' => $order,
'posts_per_page' => $limit,
);
// Category Parameter
if( $cat != "" ){
$args['tax_query'] = array(
array(
'taxonomy' => 'wpsisac_slider-category',
'field' => 'id',
'terms' => $cat
) );
}
// WP Query Parameters
$query = new WP_Query( $args );
$post_count = $query->post_count;
// If post is there
if ( $query->have_posts() ) : ?>
<div class="wpsisac-slick-slider-wrp wpsisac-clearfix <?php echo esc_attr( $extra_class ); ?>" data-conf="<?php echo htmlspecialchars( json_encode( $slider_conf )); ?>">
<div id="wpsisac-slick-slider-<?php echo esc_attr( $unique ); ?>" class="wpsisac-slick-init wpsisac-slick-slider <?php echo esc_attr( $design ); ?> <?php echo esc_attr( $image_fit_class ); ?>">
<?php while ( $query->have_posts() ) : $query->the_post();
$sliderurl = get_post_meta( $post->ID,'wpsisac_slide_link', true );
$slider_orig_img = wpsisac_get_post_featured_image( $post->ID, $image_size, true );
$slider_img = $slider_orig_img;
if ( $lazyload ) {
$slider_img = WPSISAC_URL.'assets/images/spacer.gif';
}
// Include shortcode html file
if( $design_file ) {
include( $design_file );
}
endwhile; ?>
</div>
</div>
<?php
endif;
wp_reset_postdata(); // Reset WP Query
return ob_get_clean();
}
Code file location:
wp-slick-slider-and-image-carousel/wp-slick-slider-and-image-carousel/includes/shortcodes/wpsisac-slider.phpConclusion
Now that you’ve learned how to embed the WP Slick Slider and Image Carousel Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply