{"id":55171,"date":"2024-11-11T05:26:19","date_gmt":"2024-11-11T13:26:19","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=55171"},"modified":"2024-11-24T07:34:54","modified_gmt":"2024-11-24T15:34:54","slug":"carousel-ui","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/","title":{"rendered":"Carousel UI \u2013 What is a Carousel in Web Design?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui-1024x512.png\" alt=\"carousel ui\" class=\"wp-image-55361\" style=\"width:840px;height:auto\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Designers use carousels to showcase multiple pieces of content in a compact, engaging way without overwhelming users. Carousels allow them to highlight key content\u2014such as promotions, product images, or featured stories\u2014while saving screen space. Read about carousels in UI design, when not to use them, and how to create them in UXPin.<\/p>\n\n\n\n<p>UXPin makes it easy to create carousels that highlight products, promotions, or content in a sleek, space-saving format. Whether you&#8217;re using UXPin\u2019s intuitive design tools, AI Component Creator, or powerful Merge capabilities, you can build fully customizable, responsive carousels that look and feel production-ready. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is Carousel UI?<\/h2>\n\n\n\n<p>A carousel is an interactive component used to display multiple pieces of content within a single section, allowing users to navigate through images, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/lorem-ipsum-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">text<\/a>, or other <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-of-videos\/\" target=\"_blank\" rel=\"noreferrer noopener\">media<\/a> one at a time. Typically, carousels are horizontally scrolling panels that users can control by clicking navigation arrows or swiping (on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mobile-navigation\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile devices<\/a>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Features of a Carousel in UI<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Multiple Slides<\/strong>: A carousel can contain several slides, each showcasing a different image, product, or message.<\/li>\n\n\n\n<li><strong>Navigation Controls<\/strong>: Carousels include left and right arrows or other controls that allow users to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">move back and forth between slides<\/a>.<\/li>\n\n\n\n<li><strong>Auto-Rotation (Optional)<\/strong>: Some carousels automatically advance to the next slide after a short delay, though this can sometimes be optional or user-controlled.<\/li>\n\n\n\n<li><strong>Pagination Indicators<\/strong>: Dots or other indicators often show the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">number of slides available<\/a>, helping users understand their position within the carousel.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">When to Use a Carousel?<\/h2>\n\n\n\n<p>Carousels are commonly seen on homepages, galleries, product showcases, and promotional sections to save screen space and visually highlight important <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-content-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">content<\/a>.<\/p>\n\n\n\n<p>Instead of stacking multiple images or promotions vertically, carousels allow users to view content in a controlled, engaging way without overwhelming the screen. They\u2019re especially useful for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Showcasing Products<\/strong>: In e-commerce, carousels display multiple <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-design-product-page\/\" target=\"_blank\" rel=\"noreferrer noopener\">product images<\/a> or related products.<\/li>\n\n\n\n<li><strong>Highlighting Features or Promotions<\/strong>: Carousels often spotlight key promotions or updates on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/10-things-make-homepage-success\/\" target=\"_blank\" rel=\"noreferrer noopener\">homepages<\/a>.<\/li>\n\n\n\n<li><strong>Creating Visual Flow<\/strong>: Carousels guide users through content sequentially, which can help with storytelling or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-do-task-analysis\/\" target=\"_blank\" rel=\"noreferrer noopener\">leading users to the next action step<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>While carousels can add <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-review-template-balancing-desirability-viability-feasibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">visual appeal and functionality<\/a>, they need to be designed thoughtfully to ensure they enhance the user experience rather than distracting from it.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What to Use Instead of a Carousel?<\/h2>\n\n\n\n<p>While carousels look appealing, they often create usability issues and may not be the best choice for achieving your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/6-goals-for-product-design-teams-sd\/\" target=\"_blank\" rel=\"noreferrer noopener\">design goals<\/a>.<\/p>\n\n\n\n<p>Here\u2019s why and what to use instead:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Avoid Carousels?<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Low User Engagement<\/strong>: Studies show that most users don\u2019t <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interaction-design-its-origin-and-principles\/\" target=\"_blank\" rel=\"noreferrer noopener\">interact<\/a> with carousels as much as designers expect. Often, they view only the first slide and ignore the rest. This means important information on later slides may go unseen.<\/li>\n\n\n\n<li><strong>Distractions and Cognitive Load<\/strong>: Auto-rotating carousels, in particular, can be distracting. They shift content automatically, which can interrupt users and make it <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cognitive-friction-good-or-bad\/\" target=\"_blank\" rel=\"noreferrer noopener\">harder to focus on the information<\/a>.<\/li>\n\n\n\n<li><strong>Slower Decision-Making<\/strong>: Carousels hide content until the user actively clicks or waits for the next slide. This can make it harder for users to quickly scan available options and make a choice, slowing down <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-happy-path-in-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">decision-making<\/a>.<\/li>\n\n\n\n<li><strong>Accessibility Issues<\/strong>: Carousels can be challenging for users with disabilities, especially those who <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-accessibility-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">rely on screen readers or keyboard navigation<\/a>. Poorly implemented carousels might make navigation frustrating or impossible for these users.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">What to Pick Instead?<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Grid or Card Layout<\/strong> \u2013 With a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-grids-how-to-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">grid<\/a>, users can quickly scan through options without needing to click or wait for slides to change. This format is great for showcasing multiple products, articles, or visual content.<\/li>\n\n\n\n<li><strong>Tabs<\/strong> \u2013 They are ideal for categorizing content when you have a few distinct options. They provide an instant way for users to switch between sections without extra <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-animation-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">animations<\/a> or waiting times.<\/li>\n\n\n\n<li><strong>Lists<\/strong>\u2013 Lists allow users to control the pace of browsing, which feels more natural and keeps information accessible. It\u2019s especially useful for <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/top-tips-to-design-ux-text-for-mobile-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile designs<\/a> where scrolling is second nature.<\/li>\n\n\n\n<li><strong>Accordions<\/strong> \u2013 Accordions are perfect for structuring content-heavy pages, like FAQs or product specs, without overwhelming the user. Unlike carousels, they allow users to navigate to specific sections without waiting.<\/li>\n\n\n\n<li><strong>Content Block with Supporting Links<\/strong> \u2013 This is an ideal solution when you want to spotlight one piece of content but still make additional options available without hiding them behind a carousel. It\u2019s often used for news articles or promotional sections.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create Carousel UI in UXPin<\/h2>\n\n\n\n<p>Creating a carousel UI in UXPin is a great way to display multiple items or images in a single interactive component. Here\u2019s a step-by-step guide to building a basic carousel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin<\/a><\/li>\n\n\n\n<li>With <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/generate-ui-with-ai\/\" target=\"_blank\" rel=\"noreferrer noopener\">AI Component Creator<\/a><\/li>\n\n\n\n<li>With <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin Merge<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Method 1: Using UXPin<\/h3>\n\n\n\n<p>This setup creates a basic, interactive carousel in UXPin, allowing you to showcase multiple slides in an engaging way. With UXPin\u2019s advanced <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-prototyping-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">prototyping features<\/a>, you can further customize each slide with animations, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/create-interactive-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">clickable<\/a> elements, and interactions.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Set Up Your Carousel Container<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create a Container<\/strong>: Start by creating a rectangle (or any shape you prefer) to act as the container for your carousel. This container will hold your images or content slides.<\/li>\n\n\n\n<li><strong>Set Size<\/strong>: Adjust the container size to fit the area where you want the carousel to appear.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Add Carousel Content<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add Images or Content Blocks<\/strong>: Inside the container, place images or content blocks (text, icons, buttons) you want to showcase in the carousel. Position them side-by-side in a horizontal line.<\/li>\n\n\n\n<li><strong>Group Content<\/strong>: If each slide has multiple elements (e.g., image and text), group them so each slide remains cohesive.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Create States for Each Slide<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Add States<\/strong>: With the container selected, go to the <strong>Properties Panel<\/strong> and select <strong>Add State<\/strong>. This feature allows you to create multiple versions of the container, where each state represents a different slide.<\/li>\n\n\n\n<li><strong>Duplicate and Adjust<\/strong>: For each new state, adjust the content so that only one slide is fully visible within the container. For example, in State 1, only the first image is centered and visible, while in State 2, the second image is centered, and so on.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Add Navigation Controls<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Create Navigation Buttons<\/strong>: Add left and right arrows (or other navigation icons) outside the container to allow users to navigate between slides.<\/li>\n\n\n\n<li><strong>Set Up Interactions<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Select the right arrow, then go to <strong>Interactions<\/strong> in the properties panel.<\/li>\n\n\n\n<li>Choose <strong>On Click<\/strong> as the trigger, and select <strong>Set State<\/strong> as the action.<\/li>\n\n\n\n<li>Link the right arrow to advance the container to the next state (i.e., State 2 \u2192 State 3).<\/li>\n\n\n\n<li>Repeat this process for the left arrow to go back to previous states.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 5: Add Auto-Transition (Optional)<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Auto-Transition<\/strong>: To make the carousel auto-slide, add a <strong>Timer<\/strong> interaction on the container itself.<\/li>\n\n\n\n<li><strong>Set Time<\/strong>: Define the time delay (e.g., 3 seconds) and link it to trigger the next state automatically. You can also set it to loop back to the first state when the last slide has displayed.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Step 6: Preview and Test<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Preview<\/strong>: Click <strong>Preview<\/strong> to test your carousel and ensure each interaction works smoothly.<\/li>\n\n\n\n<li><strong>Adjust as Needed<\/strong>: If the timing or transitions feel too fast or slow, adjust the time in your interactions for the desired effect.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Using AI Component Creator<\/h3>\n\n\n\n<p>The AI Component Creator in UXPin lets you generate basic components with functionality quickly using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/chatgpt-in-ui-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">ChatGPT<\/a>. The AI Component Creator is a quick way to prototype, but for more complex or tailored functionality, consider <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">using UXPin Merge<\/a>. Here\u2019s how to create a carousel:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open AI Component Creator<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In UXPin, open the <strong>AI Component Creator<\/strong> and enter a prompt that describes your carousel. For example, \u201cCreate a responsive image carousel with left and right navigation arrows that cycles through images automatically.\u201d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Define Carousel Specifications<\/strong>:\n<ul class=\"wp-block-list\">\n<li>When prompted, specify details like the number of slides, timing for auto-transition, and whether you want looping or manual navigation only.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Customize Generated Component<\/strong>:\n<ul class=\"wp-block-list\">\n<li>The AI Component Creator will generate a carousel component with the specified features.<\/li>\n\n\n\n<li>Customize the component\u2019s styles, size, and transition speed as needed by adjusting the component\u2019s properties in the <strong>Properties Panel<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Preview and Test<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Once generated, preview the carousel in UXPin\u2019s <strong>Preview Mode<\/strong>. Test the navigation buttons and ensure the auto-transition and looping work as expected.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Method 2: Using UXPin Merge<\/h3>\n\n\n\n<p>Using <strong>UXPin Merge<\/strong> allows you to work with real code, making it the perfect choice for enterprise teams who need pixel-perfect, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">production-ready components<\/a>. It also offers the flexibility to adapt the carousel as your design needs evolve, ensuring <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/dotsource-importance-of-single-source-of-truth\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistency between design and development<\/a>.<\/p>\n\n\n\n<p>With <strong>UXPin Merge<\/strong>, you can import ready-made React components (or create new ones) and customize them to behave as a carousel. Here\u2019s how to do it:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Prepare or Import a Carousel Component<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Option 1<\/strong>: If you already have a React carousel component, import it into UXPin using Merge. The component should include all necessary props for images, auto-transition, looping, and navigation.<\/li>\n\n\n\n<li><strong>Option 2<\/strong>: Use a popular React component library like <strong>Material-UI<\/strong> or <strong>Swiper.js<\/strong>, which includes pre-built carousels. Customize the component in your code editor (e.g., Visual Studio Code) as needed.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Configure Props for Customization<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once imported, configure the carousel\u2019s props in UXPin Merge to control options like:\n<ul class=\"wp-block-list\">\n<li><strong>Image Array<\/strong>: Add a prop to let you easily swap out the carousel images.<\/li>\n\n\n\n<li><strong>Auto-Transition<\/strong>: Enable a prop for timing (e.g., 3-second delay).<\/li>\n\n\n\n<li><strong>Looping<\/strong>: Set a boolean prop to turn looping on or off.<\/li>\n\n\n\n<li><strong>Navigation Controls<\/strong>: Customize left and right arrows or pagination dots.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Add Carousel to Your UXPin Project<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In UXPin, drag the imported carousel component from the <strong>Merge Library<\/strong> to your canvas.<\/li>\n\n\n\n<li>Adjust the component size, styling, and layout within UXPin as needed. Since it\u2019s a coded component, the design will match your production-ready UI exactly.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Preview and Test in Real Time<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Preview Mode<\/strong> in UXPin to test the carousel\u2019s behavior.<\/li>\n\n\n\n<li>Verify that the navigation arrows, looping, and timing function as intended. Make any final tweaks in your React code if needed for more precise control.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Creating Carousel<\/h2>\n\n\n\n<p>By following these best practices, you can create a carousel that not only looks appealing but also delivers a smooth, engaging, and accessible experience for all users:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Use auto-rotation sparingly<\/strong> \u2013 While auto-rotation can attract attention, it can also be frustrating if slides change too quickly. Apply a delay of at least 3-5 seconds per slide. Provide users the option to pause or manually navigate if desired.<\/li>\n\n\n\n<li><strong>Include strong Calls-to-Action<\/strong> \u2013 CTAs guide users to take the next step, whether it\u2019s exploring more content or making a purchase. A clear CTA on each slide ensures the carousel is purposeful and engaging.<\/li>\n\n\n\n<li><strong>Optimize for responsiveness<\/strong> \u2013 Mobile users often have less patience for interactive elements that are difficult to use. Responsive design ensures the carousel is usable on both desktop and mobile devices.<\/li>\n\n\n\n<li><strong>Test the carousel\u2019s usability<\/strong> \u2013 Run usability tests to see how users interact with the carousel and gather feedback on navigation and content. It\u2019s an essential step for validating design effectiveness.<\/li>\n\n\n\n<li><strong>Use clear navigation controls<\/strong> \u2013 Include visible left and right arrows for manual navigation, and consider adding pagination dots or a progress indicator.<\/li>\n\n\n\n<li><strong>Make the carousel accessible <\/strong>\u2013 Ensure slides are keyboard-navigable and compatible with screen readers. Add descriptive alt text for images and consider using HTML &lt;button&gt; elements for navigation.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Create Carousel and Other Interactive Elements in UXPin<\/h2>\n\n\n\n<p>A carousel is a dynamic UI component used to showcase multiple pieces of content\u2014like images or text\u2014in a limited space. With UXPin, creating an interactive carousel is easier than ever, whether you&#8217;re highlighting products, features, or stories. UXPin offers flexibility for building and testing carousels through its standard editor, AI Component Creator, or UXPin Merge, allowing designers to experiment with advanced prototypes that feel like real products. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Designers use carousels to showcase multiple pieces of content in a compact, engaging way without overwhelming users. Carousels allow them to highlight key content\u2014such as promotions, product images, or featured stories\u2014while saving screen space. Read about carousels in UI design, when not to use them, and how to create them in UXPin. UXPin makes it<\/p>\n","protected":false},"author":3,"featured_media":55361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-55171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"","yoast_metadesc":"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Carousel UI \u2013 What is a Carousel in Web Design? | UXPin<\/title>\n<meta name=\"description\" content=\"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carousel UI \u2013 What is a Carousel in Web Design?\" \/>\n<meta property=\"og:description\" content=\"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-11T13:26:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-24T15:34:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\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:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Carousel UI \u2013 What is a Carousel in Web Design?\",\"datePublished\":\"2024-11-11T13:26:19+00:00\",\"dateModified\":\"2024-11-24T15:34:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/\"},\"wordCount\":1944,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/carousel-ui.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/\",\"name\":\"Carousel UI \u2013 What is a Carousel in Web Design? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/carousel-ui.png\",\"datePublished\":\"2024-11-11T13:26:19+00:00\",\"dateModified\":\"2024-11-24T15:34:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/carousel-ui.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/carousel-ui.png\",\"width\":1200,\"height\":600,\"caption\":\"carousel ui\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/carousel-ui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel UI \u2013 What is a Carousel in Web Design?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Carousel UI \u2013 What is a Carousel in Web Design? | UXPin","description":"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.","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:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/","og_locale":"en_US","og_type":"article","og_title":"Carousel UI \u2013 What is a Carousel in Web Design?","og_description":"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/","og_site_name":"Studio by UXPin","article_published_time":"2024-11-11T13:26:19+00:00","article_modified_time":"2024-11-24T15:34:54+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Carousel UI \u2013 What is a Carousel in Web Design?","datePublished":"2024-11-11T13:26:19+00:00","dateModified":"2024-11-24T15:34:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/"},"wordCount":1944,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/","name":"Carousel UI \u2013 What is a Carousel in Web Design? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png","datePublished":"2024-11-11T13:26:19+00:00","dateModified":"2024-11-24T15:34:54+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn about carousels in UI design. Find out what a carousel is and how to build it with UXPin, UXPin Merge, and AI.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/11\/carousel-ui.png","width":1200,"height":600,"caption":"carousel ui"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/carousel-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Carousel UI \u2013 What is a Carousel in Web Design?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/55171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=55171"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/55171\/revisions"}],"predecessor-version":[{"id":55364,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/55171\/revisions\/55364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/55361"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=55171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=55171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=55171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}