A quick, easy way to add and display multiple WP Slick Slider and carousel using a shortcode. Also added Gutenberg block support.

Anoop Ranawat

Pratik Jain

WP OnlineSupport

Ketan Patel

Essential Plugin

Jahnavwponlinesupport

Mehul L

Rafik

✅ Now that you have your website ready then why don’t you download and try out this slick slider/ carousel to give it better functionality.
Download now and display multiple slick image slider and carousel using shortcode with category. Fully responsive, Swipe enabled, Desktop mouse dragging and Infinite looping. Fully accessible with arrow key navigation Autoplay, dots, arrows etc.
<a href="https://demo.essentialplugin.com/slick-slider-demo/?utm_source=WP&utm_medium=SlickSlider&utm_campaign=Read-Me" rel="nofollow ugc">FREE DEMO</a> | <a href="https://demo.essentialplugin.com/prodemo/pro-wp-slick-slider-and-carousel-demo/?utm_source=WP&utm_medium=SlickSlider&utm_campaign=Read-Me" rel="nofollow ugc">PRO DEMO</a>
Download Now this slick slider because It is proven that slick sliders have been a powerful tool to present your content in a very neat manner with the help of fancy sliders and customized designs.
Your customer might like the professional and fancy vibe of your site with slick sliders
✅ This plugin displays your images using :
<ul>
<li>Slick Slider (5 designs)</li>
<li>Slick Carousel (1 designs)</li>
</ul>
Download Now it today and explore all the features.
<h4>✅ Features :</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/yTfbOaYJYR0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
When you want to makeover your WordPress website theme with something extraordinary and creative, you must consider the slick slider/ carousel.
Help your website get a slide-wise display to show the custom posts. Not just eye appealing, it is also loved by visitors as they find it quite easy to locate custom posts.
Display an unlimited number of custom posts slider and carousel in a single page or post with different sets of options like category, limit, autoplay, arrow, and navigation type. You can also display image slider on your website header.
Also added Gutenberg block support.
<h4>✅ Here is the plugin shortcode example</h4>
Slick Slider
<pre><code>[slick-slider]
</code></pre>
Slick Carousel
<pre><code>[slick-carousel-slider]
</code></pre>
To display only slick 4 post:
<pre><code>[slick-slider limit="4"]
</code></pre>
Where limit define the number of posts to display. You can use same parameter with Carousel shortcode.
If you want to display Slider Slider by category then use this short code:
<pre><code>[slick-slider category="category_ID"]
</code></pre>
You can use same parameter with Carousel shortcode.
✅ We have given 5 designs. For designs use the following shortcode:
<pre><code>[slick-slider design="design-1"] 
</code></pre>
Where designs are : design-1, design-2, design-3, design-4, design-5. You can use same parameter with Carousel shortcode but in Carousel we have given only 1 design i.e. design-1.
<h4>✅ Here is Template code</h4>
<pre><code><?php echo do_shortcode('[slick-slider]'); ?> 
<?php echo do_shortcode('[slick-carousel-slider]'); ?> 
</code></pre>
<h4>✅ Use Following Slick Slider parameters with shortcode</h4>
<pre><code>[slick-slider]
</code></pre>
<ul>
<li>limit : [slick-slider limit=”-1″] (Limit define the number of images to be display at a time. By default set to “-1″ ie all images. eg. if you want to display only 5 images then set limit to limit=”5”)</li>
<li>category: [slick-slider category=”category_ID”] ( ie Display slider by their category ID ).</li>
<li>design : [slick-slider design=”design-1″] (You can select 5 design( design-1, design-2, design-3, design-4, design-5 ) for your slider ).</li>
<li>show_content : [slick-slider show_content=”true” ] (Display content OR not. By default value is “true”. Options are “true OR false”).</li>
<li>Pagination and arrows : [slick-slider dots=”false” arrows=”false”]</li>
<li>Autoplay and Autoplay Interval: [slick-slider autoplay=”true” autoplay_interval=”100″]</li>
<li>Slide Speed: [slick-slider speed=”3000″]</li>
<li>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 ).</li>
<li>lazyload : [slick-slider lazyload=”ondemand” ] (Use lazyload with slick slider. By default there is no lazyload enabled. If you want to set lazyload then use lazyload=”ondemand” OR lazyload=”progressive” ).</li>
<li>loop : [slick-slider loop=”true”] (Create a Infinite loop sliding. By default value is “true”. Options are “true” OR “false”.)</li>
<li>hover_pause : [slick-slider hover_pause=”true”] (Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”.)</li>
<li>image_size : [slick-slider image_size=”full”] (Default is “full”, values are thumbnail, medium, medium_large, large, full)</li>
<li>image_fit : [slick-slider image_fit=”false”] (image_fit parameter is used to specify how an image should be resized to fit its container. By default value is “false”. 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.</li>
<li>sliderheight : [slick-slider sliderheight=”400″ ] (Set image wrap height. NOTE : This parameter work better if image_fit=”true” ).</li>
<li>rtl : [slick-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).</li>
<li>extra_class : [slick-slider extra_class=””] (Enter extra CSS class for design customization ).</li>
</ul>
<h4>✅ Use Following Slick Carousel parameters with shortcode</h4>
<pre><code>[slick-carousel-slider]
</code></pre>
<ul>
<li>limit : [slick-carousel-slider limit=”-1″] (Limit define the number of images to be display at a time. By default set to “-1″ ie all images. eg. if you want to display only 5 images then set limit to limit=”5”)</li>
<li>design : [slick-carousel-slider design=”design-1″]</li>
<li>category: [slick-carousel-slider category=”category_ID”] ( ie Display slider by their category ID ).</li>
<li>image_size : [slick-carousel-slider image_size=”full”] (Default is “full”, values are thumbnail, medium, medium_large, large, full)</li>
<li>slidestoshow : [slick-carousel-slider slidestoshow=”3″ ] (Display number of images at a time. By default value is “3”).</li>
<li>slidestoscroll : [slick-carousel-slider slidestoscroll=”1″ ] (Scroll number of images at a time. By default value is “1”).</li>
<li>Pagination and arrows : [slick-carousel-slider dots=”false” arrows=”false”]</li>
<li>Autoplay and Autoplay Interval: [slick-carousel-slider autoplay=”true” autoplay_interval=”100″]</li>
<li>loop : [slick-carousel-slider loop=”true”] (Create a Infinite loop sliding. By default value is “true”. Options are “true” OR “false”.)</li>
<li>hover_pause : [slick-carousel-slider hover_pause=”true”] (Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”.)</li>
<li>Slide Speed: [slick-carousel-slider speed=”3000″]</li>
<li>lazyload : [slick-carousel-slider lazyload=”ondemand” ] (Use lazyload with slick slider. By default there is no lazyload enabled. If you want to set lazyload then use lazyload=”ondemand” OR lazyload=”progressive” ).</li>
<li>centermode : [slick-carousel-slider centermode=”true” ] ( Display main image on center. By default value is “false” ).</li>
<li>variablewidth : [slick-carousel-slider variablewidth=”true” ] (Variable width of images in slider. By default value us “false”)</li>
<li>image_fit : [slick-carousel-slider image_fit=”false” ] (image_fit parameter is used to specify how an image should be resized to fit its container. By default value is “false”. 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.</li>
<li>sliderheight : [slick-carousel-slider sliderheight=”400″ ] (Set image wrap height. NOTE : This parameter work better if image_fit=”true” ).</li>
<li>rtl : [slick-carousel-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).</li>
<li>extra_class : [slick-slider extra_class=””] (Enter extra CSS class for design customization ).</li>
</ul>
Note: Due to lots of feedback from your users side, we have made image_fit=”false” by default. Previously it was image_fit=”true”. We made image resize option now optional. If you want to resize the image, please use image_fit=”true” and sliderheight=”400″ (400 is just an example. Please use this value as per your need) shortcode parameters.
✅ Checkout demo for better understanding
<a href="https://demo.essentialplugin.com/slick-slider-demo/?utm_source=WP&utm_medium=SlickSlider&utm_campaign=Read-Me" rel="nofollow ugc">FREE DEMO</a> | <a href="https://demo.essentialplugin.com/prodemo/pro-wp-slick-slider-and-carousel-demo/?utm_source=WP&utm_medium=SlickSlider&utm_campaign=Read-Me" rel="nofollow ugc">PRO DEMO</a>
✅ Essential Plugin Bundle Deal
<a href="https://www.essentialplugin.com/pricing/?utm_source=WP&utm_medium=SlickSlider&utm_campaign=Read-Me" rel="nofollow ugc">Annual or Lifetime Bundle Deal</a>
<h4>✅ Features include:</h4>
<ul>
<li>Added Gutenberg block support.</li>
<li>Slick slider</li>
<li>Slick carousel</li>
<li>Easy to add.</li>
<li>Also work with Gutenberg shortcode block. </li>
<li>Elementor, Beaver and SiteOrigin Page Builder Native Support (New).</li>
<li>Divi Page Builder Native Support (New).</li>
<li>Fusion Page Builder (Avada) Native Support (New).</li>
<li>Touch-enabled Navigation.</li>
<li>Given 5 designs.</li>
<li>Media size i.e. thumbnail, medium, medium_large, large and full</li>
<li>Responsive.</li>
<li>Responsive touch slider.</li>
<li>Mouse Draggable.</li>
<li>Use for header image slider.</li>
<li>You can create multiple post slider with different options at single page or post.</li>
<li>Fully responsive. Scales with its container.</li>
<li>100% Multi Language.</li>
</ul>
<h4>How to install :</h4>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/rkbohcgmzVg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h4>Privacy & Policy</h4>
<ul>
<li>We have also opt-in e-mail selection, once you download the plugin , so that we can inform you and nurture you about products and its features.</li>
</ul>

Alternatives to WP Slick Slider and Image Carousel

Top alternatives