{"id":34485,"date":"2019-08-24T11:54:37","date_gmt":"2019-08-24T11:54:37","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&#038;p=34485"},"modified":"2023-07-28T08:51:56","modified_gmt":"2023-07-28T08:51:56","slug":"image-carousel","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/image-carousel\/","title":{"rendered":"Image Carousel"},"content":{"rendered":"<div class=\"block-demo block-demo-default-details\">\n\t<div class=\"block-demo-viewport\">\n\t\t<div class=\"su-image-carousel  su-image-carousel-has-spacing su-image-carousel-crop su-image-carousel-crop-16-9 su-image-carousel-has-lightbox su-image-carousel-has-outline su-image-carousel-adaptive su-image-carousel-slides-style-default su-image-carousel-controls-style-dark su-image-carousel-align-none\" style=\"\" data-flickity-options='{\"groupCells\":true,\"cellSelector\":\".su-image-carousel-item\",\"adaptiveHeight\":false,\"cellAlign\":\"left\",\"prevNextButtons\":true,\"pageDots\":true,\"autoPlay\":5000,\"imagesLoaded\":true,\"contain\":true,\"selectedAttraction\":0.025,\"friction\":0.28}' id=\"su_image_carousel_69d0d23ab280c\">\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-3W2FoIM63qE-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"319\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-512x319.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-512x319.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-1024x637.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-128x80.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-768x478.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-1536x956.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-80x50.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-24x15.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash-114x70.jpg 114w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-aUE97k7Mr1M-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"341\" height=\"512\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-341x512.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-341x512.jpg 341w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-683x1024.jpg 683w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-85x128.jpg 85w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-768x1152.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-1024x1536.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-53x80.jpg 53w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash-16x24.jpg 16w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f2qvXvJebE4-unsplash.jpg 1333w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-f4xjt3nKNs4-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Hdkca4MmA58-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"341\" height=\"512\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-341x512.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-341x512.jpg 341w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-683x1024.jpg 683w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-85x128.jpg 85w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-768x1152.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-1024x1536.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-53x80.jpg 53w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash-16x24.jpg 16w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-Jvw-3cbMXQ4-unsplash.jpg 1333w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-mS2QlkTEirI-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-rVBYZvCqWqU-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<div class=\"su-image-carousel-item\">\n<div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-512x341.jpg\" class=\"\" alt=\"\" srcset=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-512x341.jpg 512w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-1024x682.jpg 1024w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-128x85.jpg 128w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-768x512.jpg 768w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-1536x1024.jpg 1536w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-300x200.jpg 300w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-80x53.jpg 80w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash-24x16.jpg 24w, https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/08\/matt-palmer-UhbG28dHBZk-unsplash.jpg 2000w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n<\/div>\n<\/div>\n<p><script id=\"su_image_carousel_69d0d23ab280c_script\">if(window.SUImageCarousel){setTimeout(function() {window.SUImageCarousel.initGallery(document.getElementById(\"su_image_carousel_69d0d23ab280c\"))}, 0);}var su_image_carousel_69d0d23ab280c_script=document.getElementById(\"su_image_carousel_69d0d23ab280c_script\");if(su_image_carousel_69d0d23ab280c_script){su_image_carousel_69d0d23ab280c_script.parentNode.removeChild(su_image_carousel_69d0d23ab280c_script);}<\/script><\/p>\n\t<\/div>\n\t<details class=\"block-demo-source\">\n\t\t<summary>Get the code<\/summary>\n\t\t<pre contenteditable=\"true\"><\/pre>\n\t<\/details>\n<\/div>\n\n\n<p class=\"h2\">Table of contents<\/p>\n\n<ol><li><a href=\"#description\">Description<\/a><\/li><li><a href=\"#options\">Options<\/a><\/li><li><a href=\"#display-image-captions-instead-of-post-titles\">Display image captions instead of post titles<\/a><ol><li><a href=\"#for-a-single-shortcode\">For a single shortcode<\/a><\/li><li><a href=\"#for-all-shortcodes\">For all shortcodes<\/a><\/li><\/ol><\/li><li><a href=\"#adding-custom-links-to-slides\">Adding custom links to slides<\/a><\/li><li><a href=\"#filtering-slides-query-wp_query\">Filtering slides query (WP_Query)<\/a><\/li><\/ol><\/li><\/ol>\n\n\n<h2 class=\"wp-block-heading\" id=\"description\">Description<\/h2>\n\n\n\n<p>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<h2 class=\"wp-block-heading\" id=\"options\">Options<\/h2>\n\n\n\n<figure class=\"wp-block-table c-shortcode-options\"><table><tbody><tr><td><a name=\"option-source\" href=\"#option-source\">source<\/a><\/td><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.<br><br><strong>Possible values:<\/strong><br><code>media: 1,2,3<\/code> (Media file IDs)<br><code>posts: 1,2,3<\/code> (Post IDs)<br><code>posts: recent<\/code> (Recent posts)<br><code>taxonomy: category\/3,5<\/code> (Taxonomy term slug \/ term IDs)<br><br><strong>Default value:<\/strong> <code>none<\/code><\/td><\/tr><tr><td><a name=\"option-limit\" href=\"#option-limit\">limit<\/a><\/td><td>Maximum number of posts to search featured images in (for recent media, recent posts, and taxonomy)<br><br><strong>Possible values:<\/strong> Number from -1 to 100<br><br><strong>Default value:<\/strong> <code>20<\/code><\/td><\/tr><tr><td><a name=\"option-slides_style\" href=\"#option-slides_style\">slides_style<\/a><\/td><td>This option control carousel slides appearance.<br><br><strong>Possible values:<\/strong> <code>default<\/code>, <code>minimal<\/code>, <code>photo<\/code><br><br><strong>Default value:<\/strong> <code>default<\/code><\/td><\/tr><tr><td><a name=\"option-controls_style\" href=\"#option-controls_style\">controls_style<\/a><\/td><td>This option control carousel controls appearance.<br><br><strong>Possible values:<\/strong> <code>dark<\/code>, <code>light<\/code><br><br><strong>Default value:<\/strong> <code>dark<\/code><\/td><\/tr><tr><td><a name=\"option-crop\" href=\"#option-crop\">crop<\/a><\/td><td>This option allows to enable\/disable image cropping and crop aspect ratio.<br><br><strong>Possible values:<\/strong><br><code>none<\/code> (Do not crop images)<br><code>21:9<\/code> ([Landscape] 21:9)<br><code>16:9<\/code> ([Landscape] 16:9)<br><code>16:10<\/code> ([Landscape] 16:10)<br><code>5:4<\/code> ([Landscape] 5:4)<br><code>4:3<\/code> ([Landscape] 4:3)<br><code>3:2<\/code> ([Landscape] 3:2)<br><code>2:1<\/code> ([Landscape] 2:1)<br><code>1:1<\/code> ([Square] 1:1)<br><code>1:2<\/code> ([Portrait] 1:2)<br><code>2:3<\/code> ([Portrait] 2:3)<br><code>3:4<\/code> ([Portrait] 3:4)<br><code>4:5<\/code> ([Portrait] 4:5)<br><code>10:16<\/code> ([Portrait] 10:16)<br><code>9:16<\/code> ([Portrait] 9:16)<br><code>9:21<\/code> ([Portrait] 9:21)<br><br><strong>Default value:<\/strong> <code>4:3<\/code><\/td><\/tr><tr><td><a name=\"option-columns\" href=\"#option-columns\">columns<\/a><\/td><td>This option control the number of columns used in the carousel.<br><br><strong>Possible values:<\/strong> Number from 1 to 8<br><br><strong>Default value:<\/strong> <code>1<\/code><\/td><\/tr><tr><td><a name=\"option-adaptive\" href=\"#option-adaptive\">adaptive<\/a><\/td><td>Set this option to Yes to ignore the columns parameter and display a single column on mobile devices.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>yes<\/code><\/td><\/tr><tr><td><a name=\"option-spacing\" href=\"#option-spacing\">spacing<\/a><\/td><td>Adds spacing between carousel columns.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>yes<\/code><\/td><\/tr><tr><td><a name=\"option-align\" href=\"#option-align\">align<\/a><\/td><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.<br><br><strong>Possible values:<\/strong><br><code>none<\/code><br><code>left<\/code><br><code>right<\/code><br><code>center<\/code><br><code>full<\/code><br><br><strong>Default value:<\/strong> <code>none<\/code><\/td><\/tr><tr><td><a name=\"option-max_width\" href=\"#option-max_width\">max_width<\/a><\/td><td>Sets maximum width of the carousel container. CSS uints are allowed.<br>Example values: 500, 500px, 50%, 40rem.<br>Default value: none.<br><br><strong>Default value:<\/strong> <code>none<\/code><\/td><\/tr><tr><td><a name=\"option-captions\" href=\"#option-captions\">captions<\/a><\/td><td>Set this option to Yes to display image captions.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>no<\/code><\/td><\/tr><tr><td><a name=\"option-arrows\" href=\"#option-arrows\">arrows<\/a><\/td><td>This option enables left\/right arrow navigation.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>yes<\/code><\/td><\/tr><tr><td><a name=\"option-dots\" href=\"#option-dots\">dots<\/a><\/td><td>This option enables dots\/pages navigation.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>yes<\/code><\/td><\/tr><tr><td><a name=\"option-link\" href=\"#option-link\">link<\/a><\/td><td>This option adds links to carousel slides.<br><br><strong>Possible values:<\/strong><br><code>none<\/code><br><code>image<\/code> (Full-size image)<br><code>lightbox<\/code><br><code>custom<\/code> (Custom link (added in media editor))<br><code>attachment<\/code> (Attachment page)<br><code>post<\/code> (Post permalink)<br><br><strong>Default value:<\/strong> <code>none<\/code><\/td><\/tr><tr><td><a name=\"option-target\" href=\"#option-target\">target<\/a><\/td><td>This option controls how slide links will be opened.<br><br><strong>Default value:<\/strong> <code>blank<\/code><\/td><\/tr><tr><td><a name=\"option-autoplay\" href=\"#option-autoplay\">autoplay<\/a><\/td><td>Sets the time interval between automatic slide transitions, in seconds. Set to 0 to disable autoplay.<br><br><strong>Possible values:<\/strong> Number from 0 to 15<br><br><strong>Default value:<\/strong> <code>5<\/code><\/td><\/tr><tr><td><a name=\"option-speed\" href=\"#option-speed\">speed<\/a><\/td><td>This option control slides transition speed.<br><br><strong>Possible values:<\/strong><br><code>immediate<\/code><br><code>fast<\/code><br><code>medium<\/code><br><code>slow<\/code><br><br><strong>Default value:<\/strong> <code>medium<\/code><\/td><\/tr><tr><td><a name=\"option-image_size\" href=\"#option-image_size\">image_size<\/a><\/td><td>This option controls the size of carousel slide images. This option only affects image quality, not the actual slide size.<br><br><strong>Possible values:<\/strong><br><code>full<\/code> (Original image size)<br><code>thumbnail<\/code><br><code>medium<\/code><br><code>medium_large<\/code><br><code>large<\/code><br><br><strong>Default value:<\/strong> <code>large<\/code><\/td><\/tr><tr><td><a name=\"option-outline\" href=\"#option-outline\">outline<\/a><\/td><td>This option enables outline when carousel gets focus. The outline improves keyboard navigation.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>yes<\/code><\/td><\/tr><tr><td><a name=\"option-random\" href=\"#option-random\">random<\/a><\/td><td>This option enables random order for selected images. Available since 5.9.3.<br><br><strong>Possible values:<\/strong> <code>yes<\/code> or <code>no<\/code><br><br><strong>Default value:<\/strong> <code>no<\/code><\/td><\/tr><tr><td><a name=\"option-class\" href=\"#option-class\">class<\/a><\/td><td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"display-image-captions-instead-of-post-titles\">Display image captions instead of post titles<\/h2>\n\n\n\n<p>Since plugin version 5.6.1 the Image Carousel shortcode uses post titles instead of image captions if&nbsp;the&nbsp;<code>source<\/code>&nbsp;is&nbsp;set to posts or taxonomy. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;su_image_carousel source=\"posts: ...\"]\n&#091;su_image_carousel source=\"taxonomy: ...\"]<\/code><\/pre>\n\n\n\n<p>However, this behavior can be changed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"for-a-single-shortcode\">For a single shortcode<\/h3>\n\n\n\n<p>Add the&nbsp;<code>prefer_caption<\/code>&nbsp;attribute to your shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;su_image_carousel source=\"posts: ...\" prefer_caption=\"yes\"]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"for-all-shortcodes\">For all shortcodes<\/h3>\n\n\n\n<p>Add the following snippet to the end of the&nbsp;<code>functions.php<\/code>&nbsp;file of your active theme:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter(\n\t'shortcode_atts_image_carousel',\n\tfunction( $out, $pairs, $atts, $shortcode ) {\n\t\t$out&#091;'prefer_caption'] = 'yes';\n\t\treturn $out;\n\t},\n\t10,\n\t4\n);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-custom-links-to-slides\">Adding custom links to slides<\/h2>\n\n\n\n<p>The following screencast will show you how to add custom links to carousel slides.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/getshortcodes.com\/wp-content\/uploads\/2019\/11\/o_video_screencast_2019-11-02_12-49-00.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"filtering-slides-query-wp_query\">Filtering slides query (WP_Query)<\/h2>\n\n\n\n<p>This part of the article is for advanced users. You can apply a custom filter to the <code>WP_Query<\/code> request used in Image Carousel to fine-tune the results. Use the <code>su\/get_gallery_slides_query<\/code> filter to do that. Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter(\n\t'su\/get_gallery_slides_query',\n\tfunction( $args, $source, $atts ) {\n\n\t\t\/\/ $atts contains parsed attributes\n\t\t\/\/ Uncomment the next line to see what's inside\n\t\t\/\/ var_dump( $atts );\n\n\t\t\/\/ $source contains parsed images source attribute value\n\t\t\/\/ Uncomment the next line to see what's inside\n\t\t\/\/ var_dump( $source );\n\n\t\t\/\/ Do your modifications here...\n\t\t$args&#091;'order'] = 'ASC';\n\n\t\t\/\/ Return the modified args.\n\t\t\/\/ This data will be passed to the WP_Query constructor.\n\t\treturn $args;\n\n\t},\n\t10,\n\t3\n);<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p class=\"has-small-font-size\">Photos by <a rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/@mattpalmer\" target=\"_blank\">Matt Palmer<\/a><\/p>\n","protected":false},"featured_media":36648,"template":"","docs_category":[21],"class_list":["post-34485","docs","type-docs","status-publish","has-post-thumbnail","hentry","docs_category-shortcodes"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/34485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media\/36648"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=34485"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=34485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}