{"id":34182,"date":"2023-03-06T10:10:25","date_gmt":"2023-03-06T08:10:25","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=34182"},"modified":"2026-02-01T17:11:19","modified_gmt":"2026-02-01T15:11:19","slug":"loop-carousel","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/loop-carousel\/","title":{"rendered":"Loop Carousel"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What is a Loop Carousel?<\/h2>\n\n\n\n<p>A Loop Carousel is essentially a Loop Grid where the individual entries scroll from side-to-side rather than up and down. <a href=\"https:\/\/elementor.com\/help\/loop-grid\/\">Learn about Loop Grids<\/a>.<\/p>\n\n\n\n<p>[callout type=&#8221;warning&#8221;]You cannot add the following to a Loop Carousel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Off canvas widget<\/li>\n\n\n\n<li>Image Carousel widget<\/li>\n\n\n\n<li>Testimonial Carousel widget<\/li>\n\n\n\n<li>Nested Carousel widget<\/li>\n\n\n\n<li>Media Carousel widget<\/li>\n\n\n\n<li>Slides widget<\/li>\n<\/ul>\n\n\n\n<p>[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s different about the Loop Carousel?<\/h2>\n\n\n\n<p>As mentioned above, a Loop Carousel moves from side-to-to-side, therefore a number of the controls are different.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Settings for the Loop Carousel widget<\/h2>\n\n\n\n<p><a href=\"#content\">The Content tab<\/a><\/p>\n\n\n\n<p><a href=\"#style\">The Style tab<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/advanced-tab\/\">The Advanced tab<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Content tab &#8211; Layout<\/h3>\n\n\n\n<p>Layout controls how the carousel will appear to your visitors.<\/p>\n\n\n\n<p>Expand the <strong>Layout<\/strong> section<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"279\" height=\"500\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\" alt=\"\" class=\"wp-image-163211\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png 279w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3-167x300.png 167w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Choose a template <\/a><\/p>\n\n\n\n<p>Use the dropdown to select a template you designed or a premade template from the template library. Then click <b>Edit Template<\/b>. For more details, see <a href=\"https:\/\/elementor.com\/help\/what-is-a-template\/\">What is a Template?<\/a><\/p>\n\n\n\n<p><a tabindex=\"0\">Number of slides<\/a><\/p>\n\n\n\n<p>The number of items in the loop.<\/p>\n\n\n\n<p><a tabindex=\"0\">Slides to display<\/a><\/p>\n\n\n\n<p>The number of items a visitor will see on the page.<\/p>\n\n\n\n<p><a tabindex=\"0\">Slides on Scroll<\/a><\/p>\n\n\n\n<p>is determines how many slides will advance when the use clicks the next and previous arrows.<\/p>\n\n\n\n<p><a tabindex=\"0\">Equal Height<\/a><\/p>\n\n\n\n<p>Keeping all items an equal height helps preserve the symmetry of your loop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Content tab &#8211; Query<\/h3>\n\n\n\n<p>Query controls which items will appear in your carousel. See our article on <a href=\"https:\/\/elementor.com\/help\/building-query-loop-grid\/\">constructing a query for more details<\/a>.<\/p>\n\n\n\n<p>Configure a query using the below.<\/p>\n\n\n\n<p>Expand the <b>Query <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"278\" height=\"473\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Query.png\" alt=\"\" class=\"wp-image-163218\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Query.png 278w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Query-176x300.png 176w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Source <\/a><\/p>\n\n\n\n<p>Loop items are not limited to Posts. Use the dropdown to populate your loop with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Posts<\/li>\n\n\n\n<li>Pages<\/li>\n\n\n\n<li>Landing Pages<\/li>\n\n\n\n<li>Manual Selection<\/li>\n\n\n\n<li>Current Query<\/li>\n\n\n\n<li>Related (items that fall under the same category)<\/li>\n<\/ul>\n\n\n\n<p>For more details, see <a href=\"https:\/\/elementor.com\/help\/building-query-loop-grid\/\">Build a query<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Date <\/a><\/p>\n\n\n\n<p><b>Date <\/b>\u2013 You may want to limit your loop to more recent items. Use the dropdown to filter by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Past Day<\/li>\n\n\n\n<li>Past Week<\/li>\n\n\n\n<li>Past Month<\/li>\n\n\n\n<li>Past Quarter<\/li>\n\n\n\n<li>Past Year<\/li>\n\n\n\n<li>A custom date range<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Order By<\/a><\/p>\n\n\n\n<p>Items placed earlier in the loop are more likely to attract attention. Use the dropdown to order the items by:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Date<\/li>\n\n\n\n<li>Title<\/li>\n\n\n\n<li>Menu Order<\/li>\n\n\n\n<li>Last Modified<\/li>\n\n\n\n<li>Number of comments<\/li>\n\n\n\n<li>Random<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Order <\/a><\/p>\n\n\n\n<p>Further customize the order in which visitors see your loop items by organizing them in descending or ascending order.<\/p>\n\n\n\n<p><a tabindex=\"0\">Ignore Sticky Posts<\/a><\/p>\n\n\n\n<p>Toggle to <b>No <\/b>if you want the query to include these fixed position posts. You will only see the effects of this when previewing the page.<\/p>\n\n\n\n<p><a tabindex=\"0\">Query ID<\/a><\/p>\n\n\n\n<p><b>&nbsp;<\/b>You can give this Query an ID number so that you can use it for filtering on the backend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Content tab &#8211; Settings<\/h3>\n\n\n\n<p>Configure settings using the below.<\/p>\n\n\n\n<p>Expand the <b>Settings <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"278\" height=\"363\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Settings.png\" alt=\"\" class=\"wp-image-163225\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Settings.png 278w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Settings-230x300.png 230w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Autoplay <\/a><\/p>\n\n\n\n<p>Toggle to determine if items will move automatically or only when the visitor clicks the navigation icon.<\/p>\n\n\n\n<p>If you turn autoplay off, you\u2019ll have options to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Have the loop scroll infinitely.<\/li>\n\n\n\n<li>Determine the transition time between items when scrolling<\/li>\n\n\n\n<li>Set items to scroll from left-to-right or from right-to-left (this basically changes which navigation is previous and which one is next).<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Scroll Speed<\/a><\/p>\n\n\n\n<p>Control how fast your loop will move when set to autoplay \u2013 measured in milliseconds..<\/p>\n\n\n\n<p><a tabindex=\"0\">Pause on hover<\/a><\/p>\n\n\n\n<p>Pause on Hover lets your users pause the loop to select items that interest them.<\/p>\n\n\n\n<p><a tabindex=\"0\">Pause on interaction<\/a><\/p>\n\n\n\n<p>Pause on interaction lets your users pause the loop to select items that interest them.<\/p>\n\n\n\n<p><a tabindex=\"0\">Infinite scroll<\/a><\/p>\n\n\n\n<p>Keep your loop going with infinite scroll.<\/p>\n\n\n\n<p><a tabindex=\"0\">Transition Duration (ms)<\/a><\/p>\n\n\n\n<p>The time it takes to move from one item to the next \u2013 measured in milliseconds.<\/p>\n\n\n\n<p><a tabindex=\"0\">Direction <\/a><\/p>\n\n\n\n<p>Sets your items to move from left- to-right or right-to-left.<\/p>\n\n\n\n<p>Offset Sides: add an offset to your slides (means you are adjusting the starting position or the spacing alignment of the slides relative to the container.<\/p>\n\n\n\n<p>Instead of the carousel starting perfectly flush with the left side or centering the first image, an offset shifts the slides by a specific pixel amount. You can set it to: None, Both (offset on both sides), Left, or Right.<strong> <\/strong>This option works only with <strong>infinite scroll enabled<\/strong>.<\/p>\n\n\n\n<p>Offset Width: set the offset width<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Content tab &#8211; Navigation<\/h3>\n\n\n\n<p>Navigation determines how visitors can scroll through the carousel.<\/p>\n\n\n\n<p>Configure navigation using the below.<\/p>\n\n\n\n<p>Expand the <b>Navigation <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"274\" height=\"766\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Navigation.png\" alt=\"\" class=\"wp-image-163232\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Navigation.png 274w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Navigation-107x300.png 107w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Arrows <\/a><\/p>\n\n\n\n<p>Arrows are the default navigation icon. By clicking the arrows, you manually move to the previous and next slides.<\/p>\n\n\n\n<p>Toggle the button to disable arrows.<\/p>\n\n\n\n<p><a tabindex=\"0\">Previous Icon<\/a><\/p>\n\n\n\n<p>Replace the arrow icon used to view the previous slide:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/none-icon.png\" alt=\"\" width=\"12\" height=\"11\">&nbsp; Select not to display an icon<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/upload-svg-icon.png\" alt=\"\" width=\"14\" height=\"12\"> Upload an SVG file to use as an icon. See <a href=\"https:\/\/elementor.com\/help\/enable-svg-support-in-elementor\/\">Enable SVG support<\/a>.<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/06\/Chevron-left.png\" alt=\"\" width=\"7\" height=\"11\">&nbsp;\u2013 Choose an icon from the icon library.<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Horizontal Orientation<\/a><\/p>\n\n\n\n<p>Place the icon at the start, center or end of the Carousel.<\/p>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Use the slider to place the navigation icon exactly where you want it. For more details, see <a href=\"https:\/\/elementor.com\/help\/whats-the-difference-between-px-em-rem-vw-and-vh\/#\">Units of measurement<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Vertical Orientation<\/a><\/p>\n\n\n\n<p>Place the icon at the top, center or middle of the Carousel.<\/p>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Use the slider to place the navigation icon exactly where you want it.<\/p>\n\n\n\n<p><a tabindex=\"0\">Next Icon<\/a><\/p>\n\n\n\n<p>Replace the arrow icon used to view&nbsp; the previous slide with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/none-icon.png\" alt=\"\" width=\"12\" height=\"11\"> Decide not to use an icon<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/03\/upload-svg-icon.png\" alt=\"\" width=\"14\" height=\"12\"> Upload an SVG file to use as an icon. See <a href=\"https:\/\/elementor.com\/help\/enable-svg-support-in-elementor\/\">Enable SVG support<\/a>.<\/li>\n\n\n\n<li><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/06\/Chevron-right.png\" alt=\"\" width=\"7\" height=\"11\">&nbsp;\u2013 Choose an icon from the icon library.<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Use the slider to place the navigation icon exactly where you want it. For more details, see <a href=\"https:\/\/elementor.com\/help\/whats-the-difference-between-px-em-rem-vw-and-vh\/#\">Units of measurement<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Content tab &#8211; Pagination<\/h3>\n\n\n\n<p>Pagination controls how visitors will see where they are within the loop.<\/p>\n\n\n\n<p>Configure pagination using the below.<\/p>\n\n\n\n<p>Expand the <b>Pagination <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"108\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-Pgination.png\" alt=\"\" class=\"wp-image-163239\"\/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Pagination<\/a><\/p>\n\n\n\n<p>Depending on how many items you choose to display on screen, the items in your loop will be divided into \u201cpages.\u201d<\/p>\n\n\n\n<p>You can choose to help your visitors understand where they are in your loop, by displaying pagination in the form of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dots, with each dot representing a page.<\/li>\n\n\n\n<li>Fractions \u2013 using numbers to show how far they are in the loop.<\/li>\n\n\n\n<li>Progress \u2013 a bar that shows how they are in the loop.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The Style tab &#8211; Layout<\/h3>\n\n\n\n<p>Layout controls the space around the items in your Loop Carousel.<\/p>\n\n\n\n<p>Configure layout using the below.<\/p>\n\n\n\n<p>Expand the <b>Layout <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"154\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Style-Layout.png\" alt=\"\" class=\"wp-image-163246\"\/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Gap between slides<\/a><\/p>\n\n\n\n<p>Determine the amount of space between the items in your carousel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Style tab &#8211; Navigation<\/h3>\n\n\n\n<p>Make your navigation icons stand out by increasing their size or emphasize your media by making them smaller.<\/p>\n\n\n\n<p>Configure navigation using the below.<\/p>\n\n\n\n<p>Expand the <b>Navigation <\/b>section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"552\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Style-Navigation.png\" alt=\"\" class=\"wp-image-163253\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Style-Navigation.png 278w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Style-Navigation-151x300.png 151w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Size <\/a><\/p>\n\n\n\n<p>Set the size of the navigation icons. Learn more about <a href=\"https:\/\/elementor.com\/help\/whats-the-difference-between-px-em-rem-vw-and-vh\/#\">units of measurement<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Normal\/Hover<\/a><\/p>\n\n\n\n<p><strong>Normal<\/strong> \u2013 How the navigation icons will appear by default.<\/p>\n\n\n\n<p><b>Hover <\/b>\u2013 How the navigation icons will appear when visitors mouseover them.<\/p>\n\n\n\n<p><a tabindex=\"0\">Color<\/a><\/p>\n\n\n\n<p>Set the color of the navigation icons. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Choose <b>Inside <\/b>to make the navigation icons part of the loop elements, choose <b>Outside <\/b>to place them outside the elements.<\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/border-type\/\">Border Type<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/shadow\/\">Box Shadow<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/border-radius-tools\/\">Border Radius<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/elementor.com\/help\/create-space-with-padding-and-margin\/\">Padding<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Style tab &#8211; Pagination<\/h3>\n\n\n\n<p>Controls the look of the pagination symbols. This will only appear if pagination is turned on in the Content tab. There are three of these menus depending on which pagination style you choose.<\/p>\n\n\n\n<p>Configure pagination using the below.<\/p>\n\n\n\n<p>Expand the <b>Pagination <\/b>section.<\/p>\n\n\n\n<p><strong>Pagination by dots<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"417\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination.png\" alt=\"\" class=\"wp-image-163260\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination.png 278w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination-200x300.png 200w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Size <\/a><\/p>\n\n\n\n<p>Control the size of the pagination dots. Learn more about <a href=\"https:\/\/elementor.com\/help\/whats-the-difference-between-px-em-rem-vw-and-vh\/#\">units of measurement<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Normal\/Hover<\/a><\/p>\n\n\n\n<p><b>Normal <\/b>\u2013 How the pagination dots will appear by default..<\/p>\n\n\n\n<p><b>Hover <\/b>\u2013 How the pagination dot will appear when visitors mouseover them.<\/p>\n\n\n\n<p><a tabindex=\"0\">Color <\/a><\/p>\n\n\n\n<p>Change the color of your pagination icons. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Adjust the placement of the pagination dots.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose <b>Inside <\/b>to make the pagination icons part of the loop carousel.<\/li>\n\n\n\n<li>Choose <b>Outside <\/b>to place them outside the carousel. If you choose <b>Outside<\/b>, you can edit the amount of space between the carousel and the dots.<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Spacing <\/a><\/p>\n\n\n\n<p>Increase or decrease the room between the loop items and the pagination dots.<\/p>\n\n\n\n<p>Pagination by fraction<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"302\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination-fraction.png\" alt=\"\" class=\"wp-image-163267\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination-fraction.png 280w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination-fraction-278x300.png 278w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Typography <\/a><\/p>\n\n\n\n<p>Determine the font of the numbers making up the fraction. For more details, see <a href=\"https:\/\/elementor.com\/help\/what-is-typography\/\">typography<\/a><\/p>\n\n\n\n<p><a tabindex=\"0\">Color <\/a><\/p>\n\n\n\n<p>Determine the color of the numbers making up the fraction. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.<\/p>\n\n\n\n<p><a tabindex=\"0\">Position <\/a><\/p>\n\n\n\n<p>Adjust the location of the fraction:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose <b>Inside <\/b>to make the fraction part of the loop carousel.<\/li>\n\n\n\n<li>Choose <b>Outside <\/b>to place the fraction outside the carousel. If you choose <b>Outside<\/b>, you can edit the amount of space between the carousel and the fraction.<\/li>\n<\/ul>\n\n\n\n<p><a tabindex=\"0\">Spacing <\/a><\/p>\n\n\n\n<p>Increase or decrease the room between the loop items and the fraction.<\/p>\n\n\n\n<p>Progress bar<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"212\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/style-pagination-progress.png\" alt=\"\" class=\"wp-image-163274\"\/><\/figure>\n\n\n\n<p><a tabindex=\"0\">Progress Bar<\/a><\/p>\n\n\n\n<p>Control the distance between the content of the Loop Carousel and progress bar.<\/p>\n\n\n\n<p><a tabindex=\"0\">Normal\/Hover<\/a><\/p>\n\n\n\n<p>The progress bar can change colors depending on the location of the cursor:<\/p>\n\n\n\n<p><b>Normal <\/b>\u2013 How the pagination dots will appear by default..<\/p>\n\n\n\n<p><b>Hover <\/b>\u2013 How the pagination dot will appear when visitors mouseover them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related articles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/elementor.com\/help\/carousel-widget\/\">The Carousel Widget<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What is a Loop Carousel? A Loop Carousel is essentially a Loop Grid where the individual entries scroll from side-to-side rather than up and down. Learn about Loop Grids. [callout type=&#8221;warning&#8221;]You cannot add the following to a Loop Carousel: [\/callout] What\u2019s different about the Loop Carousel? As mentioned above, a Loop Carousel moves from side-to-to-side, [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3f15822605c2e030e1eb5"],"footnotes":""},"categories":[1440],"tags":[1389,1388,1387,1390,1398,1235,1236],"class_list":["post-34182","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro","tag-3-15"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Loop Carousel | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Loop Carousel in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/loop-carousel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Loop Carousel | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Loop Carousel in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/loop-carousel\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-06T08:10:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-01T15:11:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"279\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Loop Carousel\",\"datePublished\":\"2023-03-06T08:10:25+00:00\",\"dateModified\":\"2026-02-01T15:11:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/\"},\"wordCount\":1456,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\",\"Version 3.15\"],\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/\",\"url\":\"https:\/\/elementor.com\/help\/loop-carousel\/\",\"name\":\"Loop Carousel | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\",\"datePublished\":\"2023-03-06T08:10:25+00:00\",\"dateModified\":\"2026-02-01T15:11:19+00:00\",\"description\":\"Learn everything about Loop Carousel in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/loop-carousel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png\",\"width\":279,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/loop-carousel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Loop Carousel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Loop Carousel | Elementor","description":"Learn everything about Loop Carousel in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/loop-carousel\/","og_locale":"en_US","og_type":"article","og_title":"Loop Carousel | Elementor","og_description":"Learn everything about Loop Carousel in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/loop-carousel\/","og_site_name":"Help","article_published_time":"2023-03-06T08:10:25+00:00","article_modified_time":"2026-02-01T15:11:19+00:00","og_image":[{"width":279,"height":500,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/loop-carousel\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Loop Carousel","datePublished":"2023-03-06T08:10:25+00:00","dateModified":"2026-02-01T15:11:19+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/"},"wordCount":1456,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro","Version 3.15"],"articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/loop-carousel\/","url":"https:\/\/elementor.com\/help\/loop-carousel\/","name":"Loop Carousel | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png","datePublished":"2023-03-06T08:10:25+00:00","dateModified":"2026-02-01T15:11:19+00:00","description":"Learn everything about Loop Carousel in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/loop-carousel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/loop-carousel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/loop-carousel\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/03\/Content-tab-layout-3.png","width":279,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/loop-carousel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"Loop Carousel"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/34182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=34182"}],"version-history":[{"count":25,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/34182\/revisions"}],"predecessor-version":[{"id":163300,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/34182\/revisions\/163300"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=34182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=34182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=34182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}