Image carousel

The image carousel will let you add images into a horizontal box which can be scrolled through. See examples here.

Option Default Example Description
width (empty) width="500px" Add a width for the Image carousel in pixels or percentage.
space (empty) space="10" The amount of space between each image in percent.
items 1 items="3" The number of items visible at one time.
responsive (empty) responsive="0:1,600:2,960:3" This option allows you to show a different number of items depending on the width of the browser viewport. Each setting, separated by a comma, corresponds to a minimum width followed by a colon then the number of items to show for that minimum width. The example to the left means the following:

  • 0:1 – For viewport width 0 and above show 1 item
  • 600:2 – For viewport width 600 and above show 2 items
  • 960:3 – For viewport width 960 and above show 3 items
speed 500 speed="500" The speed of the animation in milliseconds (1000 = 1 second).
autoplay 0 autoplay="1" Transition automatically without user interaction.
autoplay_timeout 2500 autoplay_timeout="5000" How long the carousel should pause before transitioning again in milliseconds (1000 = 1 second).
autoplay_hover_pause 0 autoplay_hover_pause="1" Pause autoplay on mouse hover.
dots 0 dots="1" Dots navigation below slides.
loop 0 loop="1" Infinity loop.
mouse_drag 1 mouse_drag="0" Mouse drag enabled.
touch_drag 1 touch_drag="0" Touch drag enabled.
hide (empty) hide="hide-phone" This gives you the ability to hide this shortcode on the devices you select:

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large


[image_carousel width="400px" autoplay="1"]
[image src=""]
[image src=""]
[image src=""]

Still having trouble? Head over to the forums.