{"id":34485,"date":"2019-08-24T11:54:37","date_gmt":"2019-08-24T11:54:37","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=34485"},"modified":"2026-05-22T12:47:02","modified_gmt":"2026-05-22T12:47:02","slug":"image-carousel","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/image-carousel\/","title":{"rendered":"Image Carousel"},"content":{"rendered":"

On this page<\/p>\n\n

  1. Description<\/a><\/li>
  2. Options<\/a><\/li>
  3. Display image captions instead of post titles<\/a>
    1. For a single shortcode<\/a><\/li>
    2. For all shortcodes<\/a><\/li><\/ol><\/li>
    3. Adding custom links to slides<\/a><\/li>
    4. Filtering slides query (WP_Query)<\/a><\/li><\/ol><\/li><\/ol>\n\n\n

      Description<\/h2>\n\n\n\n

      With this shortcode, you can easily create beautiful image sliders and carousels. Image Carousel was introduced in Shortcodes Ultimate version 5.4.0.<\/p>\n\n\n\n

      Options<\/h2>\n\n\n\n
      source<\/a><\/td>This option defines which images will be shown in the gallery. Images can be selected manually from media library or fetched automatically from post featured images, or even filtered by a taxonomy.

      Possible values:<\/strong>
      media: 1,2,3<\/code> (Media file IDs)
      posts: 1,2,3<\/code> (Post IDs)
      posts: recent<\/code> (Recent posts)
      taxonomy: category\/3,5<\/code> (Taxonomy term slug \/ term IDs)

      Default value:<\/strong> none<\/code><\/td><\/tr>
      limit<\/a><\/td>Maximum number of posts to search featured images in (for recent media, recent posts, and taxonomy)

      Possible values:<\/strong> Number from -1 to 100

      Default value:<\/strong> 20<\/code><\/td><\/tr>
      slides_style<\/a><\/td>This option control carousel slides appearance.

      Possible values:<\/strong> default<\/code>, minimal<\/code>, photo<\/code>

      Default value:<\/strong> default<\/code><\/td><\/tr>
      controls_style<\/a><\/td>This option control carousel controls appearance.

      Possible values:<\/strong> dark<\/code>, light<\/code>

      Default value:<\/strong> dark<\/code><\/td><\/tr>
      crop<\/a><\/td>This option allows to enable\/disable image cropping and crop aspect ratio.

      Possible values:<\/strong>
      none<\/code> (Do not crop images)
      21:9<\/code> ([Landscape] 21:9)
      16:9<\/code> ([Landscape] 16:9)
      16:10<\/code> ([Landscape] 16:10)
      5:4<\/code> ([Landscape] 5:4)
      4:3<\/code> ([Landscape] 4:3)
      3:2<\/code> ([Landscape] 3:2)
      2:1<\/code> ([Landscape] 2:1)
      1:1<\/code> ([Square] 1:1)
      1:2<\/code> ([Portrait] 1:2)
      2:3<\/code> ([Portrait] 2:3)
      3:4<\/code> ([Portrait] 3:4)
      4:5<\/code> ([Portrait] 4:5)
      10:16<\/code> ([Portrait] 10:16)
      9:16<\/code> ([Portrait] 9:16)
      9:21<\/code> ([Portrait] 9:21)

      Default value:<\/strong> 4:3<\/code><\/td><\/tr>
      columns<\/a><\/td>This option control the number of columns used in the carousel.

      Possible values:<\/strong> Number from 1 to 8

      Default value:<\/strong> 1<\/code><\/td><\/tr>
      adaptive<\/a><\/td>Set this option to Yes to ignore the columns parameter and display a single column on mobile devices.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> yes<\/code><\/td><\/tr>
      spacing<\/a><\/td>Adds spacing between carousel columns.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> yes<\/code><\/td><\/tr>
      align<\/a><\/td>This option controls how the gallery will be aligned within a page. Left, Right, and Center options require Max Width to be set. Full option requires page template with no sidebar.

      Possible values:<\/strong>
      none<\/code>
      left<\/code>
      right<\/code>
      center<\/code>
      full<\/code>

      Default value:<\/strong> none<\/code><\/td><\/tr>
      max_width<\/a><\/td>Sets maximum width of the carousel container. CSS uints are allowed.
      Example values: 500, 500px, 50%, 40rem.
      Default value: none.

      Default value:<\/strong> none<\/code><\/td><\/tr>
      captions<\/a><\/td>Set this option to Yes to display image captions.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      arrows<\/a><\/td>This option enables left\/right arrow navigation.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> yes<\/code><\/td><\/tr>
      dots<\/a><\/td>This option enables dots\/pages navigation.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> yes<\/code><\/td><\/tr>
      link<\/a><\/td>This option adds links to carousel slides.

      Possible values:<\/strong>
      none<\/code>
      image<\/code> (Full-size image)
      lightbox<\/code>
      custom<\/code> (Custom link (added in media editor))
      attachment<\/code> (Attachment page)
      post<\/code> (Post permalink)

      Default value:<\/strong> none<\/code><\/td><\/tr>
      target<\/a><\/td>This option controls how slide links will be opened.

      Default value:<\/strong> blank<\/code><\/td><\/tr>
      autoplay<\/a><\/td>Sets the time interval between automatic slide transitions, in seconds. Set to 0 to disable autoplay.

      Possible values:<\/strong> Number from 0 to 15

      Default value:<\/strong> 5<\/code><\/td><\/tr>
      speed<\/a><\/td>This option control slides transition speed.

      Possible values:<\/strong>
      immediate<\/code>
      fast<\/code>
      medium<\/code>
      slow<\/code>

      Default value:<\/strong> medium<\/code><\/td><\/tr>
      image_size<\/a><\/td>This option controls the size of carousel slide images. This option only affects image quality, not the actual slide size.

      Possible values:<\/strong>
      full<\/code> (Original image size)
      thumbnail<\/code>
      medium<\/code>
      medium_large<\/code>
      large<\/code>

      Default value:<\/strong> large<\/code><\/td><\/tr>
      outline<\/a><\/td>This option enables outline when carousel gets focus. The outline improves keyboard navigation.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> yes<\/code><\/td><\/tr>
      random<\/a><\/td>This option enables random order for selected images. Available since 5.9.3.

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Display image captions instead of post titles<\/h2>\n\n\n\n

      Since plugin version 5.6.1 the Image Carousel shortcode uses post titles instead of image captions if the source<\/code> is set to posts or taxonomy. Example:<\/p>\n\n\n\n

      [su_image_carousel source=\"posts: ...\"]\n[su_image_carousel source=\"taxonomy: ...\"]<\/code><\/pre>\n\n\n\n
      However, this behavior can be changed.<\/p>\n\n\n\n
      For a single shortcode<\/h3>\n\n\n\n
      Add the prefer_caption<\/code> attribute to your shortcode:<\/p>\n\n\n\n
      [su_image_carousel source=\"posts: ...\" prefer_caption=\"yes\"]<\/code><\/pre>\n\n\n\n
      For all shortcodes<\/h3>\n\n\n\n
      Add the following snippet to the end of the functions.php<\/code> file of your active theme:<\/p>\n\n\n\n
      add_filter(\n\t'shortcode_atts_image_carousel',\n\tfunction( $out, $pairs, $atts, $shortcode ) {\n\t\t$out['prefer_caption'] = 'yes';\n\t\treturn $out;\n\t},\n\t10,\n\t4\n);<\/code><\/pre>\n\n\n\n