WP Slick Slider and Image Carousel

설명

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.

It uses A custom post type and taxonomy to create a slider, with almost unlimited options and support for multiple sliders on any page. You can also display image slider on your website header.

We have added 5 designs for slider and 1 design for carousel. You can find all designs on our demo website. Just copy the shortcode of design that you like and use.

Check Demo and Features for additional information.

Also added Gutenberg block support.

You can use 2 shortcodes

[slick-slider] and [slick-carousel-slider]

Here is Template code

<?php echo do_shortcode('[slick-slider]'); ?>  and
 <?php echo do_shortcode('[slick-carousel-slider]'); ?> 

Use Following parameters with shortcode

[slick-slider]
  • 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”)
  • category: [slick-slider category=”category_ID”] ( ie Display slider by their category ID ).
  • show_content : [slick-slider show_content=”true” ] (Display content OR not. By default value is “true”. Options are “true OR false”).
  • Pagination and arrows : [slick-slider dots=”false” arrows=”false”]
  • Autoplay and Autoplay Interval: [slick-slider autoplay=”true” autoplay_interval=”100″]
  • Slide Speed: [slick-slider speed=”3000″]
  • 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 ).
  • 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” ).
  • 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”.)
  • image_size : [slick-slider image_size=”full”] (Default is “full”, values are thumbnail, medium, medium_large, large, full)
  • 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.
  • sliderheight : [slick-slider sliderheight=”400″ ] (Set image wrap height. NOTE : This parameter work better if image_fit=”true” ).
  • rtl : [slick-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).

Use Following parameters with shortcode

[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″ ie all images. eg. if you want to display only 5 images then set limit to limit=”5”)
  • design : [slick-carousel-slider design=”design-1″] (You can select 5 design( design-1, design-2, design-3, design-4, design-5 ) for your slider. Slick Slider -> Slider Designs ).
  • category: [slick-carousel-slider category=”category_ID”] ( ie Display slider by their category ID ).
  • image_size : [slick-carousel-slider image_size=”full”] (Default is “full”, values are thumbnail, medium, medium_large, large, full)
  • slidestoshow : [slick-carousel-slider slidestoshow=”3″ ] (Display number of images at a time. By default value is “3”).
  • slidestoscroll : [slick-carousel-slider slidestoscroll=”1″ ] (Scroll number of images at a time. By default value is “1”).
  • Pagination and arrows : [slick-carousel-slider dots=”false” arrows=”false”]
  • Autoplay and Autoplay Interval: [slick-carousel-slider autoplay=”true” autoplay_interval=”100″]
  • 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”.)
  • Slide Speed: [slick-carousel-slider speed=”3000″]
  • 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” ).
  • centermode : [slick-carousel-slider centermode=”true” ] ( Display main image on center. By default value is “false” ).
  • variablewidth : [slick-carousel-slider variablewidth=”true” ] (Variable width of images in slider. By default value us “false”)
  • 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.
  • sliderheight : [slick-carousel-slider sliderheight=”400″ ] (Set image wrap height. NOTE : This parameter work better if image_fit=”true” ).
  • rtl : [slick-carousel-slider rtl=”true”] (for rtl mode. By default value is “false”. Options are “true OR false”).

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.

PRO Features Added :

Premium Version

  • 90+ Predefined stunning designs.
  • 30 Image Slider Designs.
  • 30 Image Carousel and Center Slider Designs.
  • 33 Slider Variable width Designs.
  • Gutenberg Block Supports.
  • WP Templating Features.
  • WPBakery Page Builder Support.
  • Drag & Drop frature to display slide in your order.
  • Custom CSS plugin setting option.
  • Powerful shortcode with strong parameters.
  • Display content with image and link in Carousel mode .
  • Fully Responsive.
  • 100% Multi Language.

Check PRO DEMO and Features to know more.

See how this plugin can support your website :

How to install :

Features include

  • Also added Gutenberg block support.
  • Display unlimited number of slider and carousel with the help of category.
  • Touch-enabled Navigation.
  • Fully responsive. Scales with its container.
  • Fully accessible with arrow key navigation.
  • 반응형 (Responsive)
  • Given shortcode and template code.
  • Use for header image slider.

Privacy & Policy

  • 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.

스크린샷

  • Design-1
  • Design-2
  • Design-3
  • Design-4
  • Design-5
  • Design-6
  • Also work with Gutenberg shortcode block.
  • Also added Gutenberg block support.
  • Also added Gutenberg block support.

블록

이 플러그인은 2(을)를 제공합니다.

  • WP Slick Slider and Image Carousel
  • WP Slick Slider and Image Carousel

설치

  1. Upload the ‘wp-slick-slider-and-carousel’ folder to the ‘/wp-content/plugins/’ directory.
  2. Activate the “wp-slick-slider-and-carousel” list plugin through the ‘Plugins’ menu in WordPress.
  3. Add this short code where you want to display slider

    [slick-slider] and [slick-carousel-slider]

How to install :

후기

2020년 9월 28일
Not only were they able to help me achieve what I needed, they were fast and also worked over the weekend. Highly recommended!
2020년 9월 22일
I just like it more than others because of how it integrates with my site.
2020년 7월 9일
Amazing support from the developer! This is one of the best slider plugin you can count on.
2020년 5월 23일
I have been looking for a slider plugin with a partial view for some time and bumped upon this. I had some teething troubles but prompt customer support from the author resolved all the issues.
모든 54 평가 읽기

기여자 & 개발자

“WP Slick Slider and Image Carousel”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

자국어로 “WP Slick Slider and Image Carousel”(을)를 번역하십시오.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하십시오.

변경이력

2.2.1 (27, Oct 2020)

  • [*] Minor Update – Fixed conflict from tgmpa (theme pluign recommends – if your theme using tgmpa library) where it was showing message inside “How It Works – Display and shortcode”

2.2 (22, Oct 2020)

  • [+] New – Click to copy the shortcode from the getting started page.
  • [*] Update – Regular plugin maintenance. Updated readme file.
  • [*] Added – Added our other Popular Plugins under Slick Slider –> Install Popular Plugins From WPOS. This will help you to save your time during creating a website.

2.1 (14, Aug 2020)

  • [*] jQuery( document ).ready(function($) is replaced with function( $ ) to solve the issue with 3rd party plugin and theme js error.

2.0.2 (14-07-2020)

  • [*] Follow WordPress Detailed Plugin Guidelines for Offload Media and Analytics Code.

2.0.1 (07, July 2020)

  • [*] 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.
  • [*] Fixed some design related issues.
  • [*] Tested up to: 5.4.2

2.0 (17, April 2020)

  • [+] New – Added Gutenberg block support. Now use plugin easily with Gutenberg!
  • [+] New – Added ‘align’ and ‘extra_class’ parameter for slider shortcode. Now both slider shortcode are support twenty-ninteent and twenty-twenty theme gutenberg block align and additional class feature.
  • [+] New – Add new classes sanatize function in function file.
  • [*] Tweak – Code optimization and performance improvements.

1.9.3 (06, April 2020)

  • [+] Added new shortcode parameter loop and hover_pause for both shortcode
  • [+] loop : Create a Infinite loop sliding. By default value is “true”. Options are “true” OR “false”.
  • [+] hover_pause : Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”.

1.9.2 (05, March 2020)

  • [+] Added new shortcode parameter lazyload=”ondemand” OR lazyload=”progressive” for both shortcodes.

1.9.1 (26, Dec 2019)

  • [*] Updated features list.
  • [*] Replaced wp_reset_query() with wp_reset_postdata()
  • [*] Added prefix wpsisac- to all classes in css to avoid conflict with any theme and third-party plugins.

1.8 (08, August 2019)

  • [*] Update demo links
  • [*] Fixed some small-small issues.
  • [*] Updated text under featred image ie Add slider image.

1.7.1 (31, May 2019)

  • [+] Added new shortcode parameter ie 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 : NOTE : image_fit=”true” work better if sliderheight is given. if image_fit=”false”, no need to use sliderheight parameter.
  • [*] image_fit parameter work with both the shortcode.
  • [+] Added new shortcode parameter ie image_size=”full” for shortcode [slick-slider] (Default is “full”, values are thumbnail, medium, medium_large, large, full)
  • [-] Removed default height 400 from sliderheight parameter.
  • [-] Remove object-fit CSS property from img under CSS if image_fit=”false”.

1.6.2 (12, Feb 2019)

  • [*] Minor change in Opt-in flow.

1.6.1 (26, Dec 2018)

  • [*] Update Opt-in flow.

1.6 (06, Dec 2018)

  • [*] Tested with WordPress 5.0 and Gutenberg.
  • [*] Fixed slider height issues with some designs.
  • [*] Taken better security with esc_url and esc_html.
  • [*] Fixed some CSS issues.

1.5.1 (05, June 2018)

  • [*] Follow some WordPress Detailed Plugin Guidelines.

1.5 (10/3/2018)

  • [*] Fixed some css issues related to slider arrow.

1.4 (10/3/2018)

  • [*] Fixed some css issues

1.3.4 (04/10/2017)

  • [*] Fixed all responsive issues and checked many mobile devices.
  • [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.3 (04/10/2017)

  • [*] Updated slick.min.js to the latest version
  • [*] Fixed all responsive issues and checked many mobile devices.
  • [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.2.1 (27/09/2017)

  • [*] Fixed design-6 issue with shortcode parameter variablewidth=”true” in responsive layout
  • [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.2 (23/09/2017)

  • [*] Fixed design-6 issue with shortcode parameter variablewidth=”true”
  • [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.1.1 (23/09/2017)

  • [*] Fix responsive issue reported by users in v-1.3.1
  • [*] If you are using any cache plugin, please clear your cacheing after plugin updates

1.3.1 (22/09/2017)

  • [*] Fix main JS wp_register_script issue

1.3 (22/09/2017)

  • [+] Added sliderheight parameter in shortcode [slick-carousel-slider]
  • [*] RTL made better to work with RTL websites
  • [*] Center mode and variablewidth improved better as per usres feedback
  • [*] sliderheight parameter improved

1.2.8 (22/05/2017)

  • [+] RTL Supported

1.2.7 (25/04/2017)

  • [+] Added overlay for design-2

1.2.6 (07/11/2016)

  • [+] Added “How it work tab”
  • [-] Removed Pro design tab

1.2.5 (20/10/2016)

  • Updated all the designs and fix the bug
  • Fixed image display issue on mobile
  • Replaced arrow images

1.2.4

  • Updated slider js to latest version.
  • Updated plugin design page.

1.2.3

  • Fixed some css issues.

1.2.2

  • Fixed some css issues.
  • Resolved multiple slider jquery conflict issue.

1.2.1

  • Fixed some bug
  • Added Pro version with 16 designs

1.2

  • Fixed some bug
  • Added link to carousel mode

1.1

  • Fixed some bug
  • Added Limit

1.0

  • Initial release.