WordPress.org

Plugin Directory

Carousel Slider

Touch enabled wordpress plugin that lets you create beautiful responsive carousel slider.

Fully written in jQuery, touch enabled wordpress plugin based on OWL Carousel that lets you create beautiful responsive carousel slider.

Depreciated shortcode at version 1.5.0

carousel_slider
all-carousels

Depreciated shortcode attribute from "carousel" shortcode at version 1.5.0

pagination_speed
rewind_speed
scroll_per_page
pagination_numbers
auto_height
single_item

Introduce new shortcode attribute in "carousel" shortcode at version 1.5.0

margin_right
inifnity_loop
autoplay_timeout
autoplay_speed
slide_by
nav_color
nav_active_color

Usage 1st method

Then go to Carousels >> Add New and fill all fields as your need and then click on "Publish" button. Now copy the generated shortcode and paste on post or page where you want to show carousel slider. See video instruction:

Usage - 2nd method

Without using custom post (Carousels admin menu), you can use custom shortcode to link image and generate carousel slider.

To gererate carousel slider using shortcode, at first write wrapper shortcode as following:

[carousel][/carousel]

Now write the following shortcode inside the wrapper shortcode as many image as you want.

[item img_link=""]

You can add following attribute if you want to link image to custom post, page, image or anything that you want to open on click. Like as following

[item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"]

The whole shortcode look likes as following: (See example shortcode.)

[carousel][item img_link="IMAGE_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE" href="CUSTOM_URL_GOES_HERE"][item img_link="IMAGE_URL_GOES_HERE"][/carousel]

Change Default Functionality

You can change default functionality by adding following optional attributes at [carousel][/carousel] shortcode

id=''

Default: Random number Add id if you want to use multiple carousel at same page. If you leave it blank, it will generate random number.

items=''

Default: 4 To set the maximum amount of items displayed at a time with the widest browser width (window >= 1200)

items_desktop=''

Default: 4 This allows you to preset the number of slides visible with (window >= 980) browser width.

items_desktop_small=''

Default: 3 This allows you to preset the number of slides visible with (window >= 768) browser width.

items_tablet=''

Default: 2 This allows you to preset the number of slides visible with (window >= 600) browser width.

items_mobile=''

Default: 1 This allows you to preset the number of slides visible with (window >= 320) browser width.

auto_play=''

Default: true Write true to enable autoplay else write false.

stop_on_hover=''

Default: true Write true pause autoplay on mouse hover else write false.

navigation=''

Default: true Write false to hide "next" and "previous" buttons.

nav_color=''

Default: #d6d6d6 Enter hex value of color for carousel navigation.

nav_active_color=''

Default: #4dc7a0 Enter hex value of color for carousel navigation on mouse hover.

margin_right=''

Default: 10 margin-right(px) on item. Default value is 10. Example: 20

inifnity_loop=''

Default: true Write true to show inifnity loop. Duplicate last and first items to get loop illusion

autoplay_timeout=''

Default: 5000 Autoplay interval timeout in millisecond.

autoplay_speed=''

Default: 500 Autoplay speen in millisecond.

slide_by=''

Default: 1 Navigation slide by x number. Default value is 1.

Example 1 (no attribute):

[carousel][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]

Example 2 (with attribute):

[carousel id='myCustomId' items='3' items_desktop='3' margin_right='5' navigation='false'][item img_link='http://lorempixel.com/400/200/city/1/'][item img_link='http://lorempixel.com/400/200/city/2/'][item img_link='http://lorempixel.com/400/200/city/3/'][item img_link='http://lorempixel.com/400/200/city/4/'][item img_link='http://lorempixel.com/400/200/city/5/'][item img_link='http://lorempixel.com/400/200/city/6/'][item img_link='http://lorempixel.com/400/200/city/7/'][item img_link='http://lorempixel.com/400/200/city/8/'][item img_link='http://lorempixel.com/400/200/city/9/'][item img_link='http://lorempixel.com/400/200/city/10/'][/carousel]
If you like the plugin or earning using this plugin, make a small <a href="http://www.sayfulit.com/donate/">donation</a>.

Requires: 3.0 or higher
Compatible up to: 4.4.4
Last Updated: 6 months ago
Active Installs: 7,000+

Ratings

3 out of 5 stars

Support

0 of 1 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1
0,1,0