Image carousel

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

OptionDefaultExampleDescription
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.
items1items="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
speed500speed="500"The speed of the animation in milliseconds (1000 = 1 second).
autoplay0autoplay="1"Transition automatically without user interaction.
autoplay_timeout2500autoplay_timeout="5000"How long the carousel should pause before transitioning again in milliseconds (1000 = 1 second).
autoplay_hover_pause0autoplay_hover_pause="1"Pause autoplay on mouse hover.
dots0dots="1"Dots navigation below slides.
loop0loop="1"Infinity loop.
mouse_drag1mouse_drag="0"Mouse drag enabled.
touch_drag1touch_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

Examples

[image_carousel width="400px" autoplay="1"]
[image src="http://www.example.com/image1.png"]
[image src="http://www.example.com/image2.png"]
[image src="http://www.example.com/image3.png"]
[/image_carousel]

Still having trouble? Head over to the forums.

Forums