On this page
- Carousel Example
- Slider Example
- Lightbox
- Slides Style
- Displaying Recent Posts
- Controls Styles
- Custom Image Aspect Ratio
- Remove Gap Between Items
- Max Width and Alignment
- Image Captions
- Disabled Navigation Dots and Arrows
- Autoplay and Speed
Carousel Example
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3"]Replace 1, 2, 3 with attachment IDs
Slider Example
This example shows how you can display the carousel as a slider by just setting number of visible columns to 1
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="1" crop="21:9"]Replace 1, 2, 3 with attachment IDs
Lightbox
Shortcode
[su_image_carousel source="media: 1,2,3" columns="2" crop="21:9" link="lightbox"]Slides Style
Slides Style: Default
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="4" slides_style="default"]Slides Style: Minimal
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="4" slides_style="minimal"]Slides Style: Photo
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="4" slides_style="photo"]Displaying Recent Posts
Shortcode
[su_image_carousel source="posts: recent" limit="10" columns="3" crop="16:9" link="post"]Controls Styles
Light
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3" controls_style="light"]Dark
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3" controls_style="dark"]Custom Image Aspect Ratio
9:16 for vertical content
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3" crop="9:16"]4:3 for regular photos
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3" crop="9:16"]Available crop ratios
- none (Don’t crop images)
- 21:9 (Landscape)
- 16:9 (Landscape)
- 16:10 (Landscape)
- 5:4 (Landscape)
- 4:3 (Landscape)
- 3:2 (Landscape)
- 2:1 (Landscape)
- 1:1 (Square)
- 1:2 (Portrait)
- 2:3 (Portrait)
- 3:4 (Portrait)
- 4:5 (Portrait)
- 10:16 (Portrait)
- 9:16 (Portrait)
- 9:21 (Portrait)
Remove Gap Between Items
Shortcode
[su_image_carousel source="media: 1, 2, 3" columns="3" slides_style="minimal" spacing="no"]Max Width and Alignment
Shortcode
[su_image_carousel source="media: 1,2,3" columns="3" align="center" max_width="400px"]Image Captions
Shortcode
[su_image_carousel source="media: 1,2,3" captions="yes" columns="5"]Disabled Navigation Dots and Arrows
Shortcode
[su_image_carousel source="media: 1,2,3" dots="no" arrows="no" columns="5"]Autoplay and Speed
One Second Autoplay and Fast Speed
Shortcode
[su_image_carousel source="media: 1,2,3" columns="3" autoplay="2" speed="fast"]Disabled Autoplay
Shortcode
[su_image_carousel source="media: 1,2,3" columns="3" autoplay="2" speed="fast"]