Slick Carousel Element
Valid Children Shortcode
To avoid Javascript error, this element must only have [wpcarouselcontent] or [wpcarouselimage] or [wptestimonial] as its content
Shortcode Formats
The following format example can be invoked manually outside the VisualComposer to generate the element.
Note : Wordpress doesn't allow new line inside the shortcode, you must remove all new lines and replace them with space when using the shortcode.
[wpcarousel class="someclass" id="someid" accessibility="true|false" autoplay="true|false" arrows="true|false" centermode="true|false" draggable="true|false" fade="true|false" pauseonhover="true|false" infinite="true|false" swipe="true|false" touchmove="true|false" vertical="true|false" cssease="ease|ease-in|ease-out|ease-in-out" easing="swing|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|..." lazyload="ondemand|progressive" autoplayspeed="Number in miliseconds" centerpadding="xxpx" slidestoshow="number" slidestoscroll="number" speed="number in miliseconds" touchthreshold="number" ] // For generic content [wpcarouselcontent] Some content here additional shortcodes is allowed [/wpcarouselcontent] // For testimonial [wptestimonial image="wp attachment id" name="string for name" position="string for position"] Some content for testimonial, additional shortcode inside this tag is allowed [/wptestimonial] // For client logo [wpclientlogo image="wp media attachment id" href="the url to link the image to" ] [/wpcarousel]
Shortcodes Attributes
The shortcode above will accepts the following attributes.
Attributes | Valid Value | Description |
---|---|---|
autoplay | true or false | enable or disable the autoscrolling feature |
arrows | true or false | display or hide the navigation arrow |
centermode | true or false | enable the center is larger than other mode |
draggable | true or false | mouse drag to scroll content |
fade | true or false | use fading instead of sliding for animation |
pauseonhover | true or false | pause the scrolling on mouse hover |
infinite | true or false | display the previous value, only applicable if read only is set to false |
swipe | true or false | swipe move to scroll the content |
touchmove | true or false | touch to scroll the content |
vertical | true or false | enable or disable the vertical scrolling mode |
cssease | ease or ease-in or ease-out or ease-in-out | CSS3 Easing value |
easing | valid jQuery easing value | define custom easing value for scrolling animation |
lazyload | ondemand or progressive | lazy loading images |
autoplayspeed | number in miliseconds | the autoplay pause time before scrolling again |
centerpadding | number px example: 20px | the padding size for the centered element |
slidetoshow | number | the maximum number of slide to show at once in the frame |
slidetoscroll | number | the number of slide to move on sliding action |
speed | number in miliseconds | the sliding speed in miliseconds |
id | valid css id | optional css id |
class | valid css class multiple classes can be separated by space or comma | optional css class |