--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/carousel-layout' title: '캐러셀 레이아웃 추가하기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:55:22+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 인용문, 혜택, 공지처럼 한 자리에서 콘텐츠를 돌아가며 보여주고 싶을 때 Carousel 레이아웃 요소를 사용합니다. 완성되면 자동으로 넘어가는 슬라이드가 생기고, 슬라이드마다 도트 하나가 표시됩니다. Image carousel과 달리 각 슬라이드에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼 등입니다. 예제에서는 수강생 인용문 슬라이더를 만듭니다. tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '캐러셀 레이아웃 추가하기' description: |- 인용문, 혜택, 공지처럼 한 자리에서 콘텐츠를 돌아가며 보여주고 싶을 때 Carousel 레이아웃 요소를 사용합니다. 완성되면 자동으로 넘어가는 슬라이드가 생기고, 슬라이드마다 도트 하나가 표시됩니다. Image carousel과 달리 각 슬라이드에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼 등입니다. 예제에서는 수강생 인용문 슬라이더를 만듭니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:55:22+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/carousel-layout' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/carousel-layout' description: |- 인용문, 혜택, 공지처럼 한 자리에서 콘텐츠를 돌아가며 보여주고 싶을 때 Carousel 레이아웃 요소를 사용합니다. 완성되면 자동으로 넘어가는 슬라이드가 생기고, 슬라이드마다 도트 하나가 표시됩니다. Image carousel과 달리 각 슬라이드에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼 등입니다. 예제에서는 수강생 인용문 슬라이더를 만듭니다. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 캐러셀 레이아웃 추가하기. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Image Carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel) - [탭 패널 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [스크롤, 호버, 클릭 시 콘텐츠 애니메이션](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab) 인용문, 혜택, 공지처럼 한 자리에서 콘텐츠를 돌아가며 보여주고 싶을 때 Carousel 레이아웃 요소를 사용합니다. 완성되면 자동으로 넘어가는 슬라이드가 생기고, 슬라이드마다 도트 하나가 표시됩니다. [Image carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel)과 달리 각 슬라이드에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼 등입니다. 예제에서는 수강생 인용문 슬라이더를 만듭니다. ## 캐러셀 레이아웃 추가하기 1. 컬럼에 마우스를 올리고 컨트롤 표시줄의 **+**를 클릭하여 요소 선택기를 엽니다. 2. 탭 **Layout**에서 항목 **Carousel**을 클릭합니다. 3. 먼저 설정이 열립니다. 기본값을 유지하려면 **Save**를 클릭합니다. 빈 슬라이드 하나가 있는 캐러셀이 나타납니다. 4. 슬라이드 안의 **+**를 클릭하고 **Text** 요소 같은 콘텐츠를 추가합니다. 5. 슬라이드를 추가하려면 캐러셀에 마우스를 올리고 컨트롤 표시줄의 **Add slide**를 클릭합니다. 캐러셀 아래에서 해당 슬라이드의 도트를 클릭하여 연 뒤 같은 방식으로 채웁니다. ## 표시 내용 첫 번째 슬라이드가 표시되고 아래에 슬라이드마다 막대 하나가 보입니다. 5초마다 다음 슬라이드가 들어오고, 마지막 다음에는 첫 번째로 돌아옵니다. 방문자는 막대를 클릭하여 슬라이드로 이동하거나 터치 화면에서 스와이프할 수 있습니다. 모든 슬라이드는 가장 높은 슬라이드의 높이를 사용하므로 캐러셀 아래 콘텐츠가 출렁이지 않습니다. ## 캐러셀 설정하기 설정은 **More** > **Settings**에서 엽니다. 해당 항목은 **Carousel** 컨트롤 표시줄에 있습니다. **General** 패널에 타이밍이 있습니다. | Setting | What it does | Default | |---|---|---| | **Frames per slide** | 나란히 표시되는 슬라이드 수로, 1부터 10까지입니다. 좁은 화면에서는 더 적게 표시되며 휴대전화에서는 하나까지 줄어듭니다. | 1 | | **Disable auto-play** | 슬라이드가 자동으로 넘어가지 않게 합니다. | Off | | **Auto-play interval** | 슬라이드 간격으로, 1000부터 20000밀리초까지입니다. | 5000 | | **Stop on hover** | 캐러셀 위에 포인터가 있는 동안 자동 재생을 일시 정지합니다. | Off | | **Dots navigation** | 위치는 다음과 같습니다. **Dots** 패널에서 슬라이드마다 도트 하나를 표시합니다. | On | | **Next/Previous** | 위치는 다음과 같습니다. **Next/Previous** 패널에서 화살표 버튼을 표시합니다. | Off | ### 도트와 화살표 조건은 다음과 같습니다. **Dots navigation**이 켜져 있으면 **Dots** 패널에서 다음도 지정할 수 있습니다. - **Dots orientation**: **Outside slider**(아래) 또는 **Inside slider** - **Dot shape**: **Bar**, **Circle**, **Square** 또는 **Triangle** - **Active dot transformation**: **None**, **Grow taller**, **Grow wider** 또는 **Scale up** - **Dot color** 및 **Active dot color** 조건은 다음과 같습니다. **Next/Previous**가 켜져 있으면 **Next/Previous** 패널에서 다음도 지정할 수 있습니다. - **Orientation**: **Outside slider** 또는 **Inside slider** - **Dot shape**: 각 화살표 뒤의 버튼으로, **No background**, **Circle**, **Square** 또는 **Bar** - **Icon color**, **Icon hover color**, **Background color** 및 **Background hover color** - **Outside navigation position**: **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** 또는 **Bottom right** ## 슬라이드 아이디어 - **Testimonial slider**: 각 슬라이드에 인용문의 **Block quote**와 이름의 **Text** 요소를 넣습니다. **Dots navigation**은 켜고 **Next/Previous**는 끈 채로, 방문자가 다 읽을 수 있게 **Auto-play interval**을 7000으로 설정합니다. - **Hero carousel**: 슬라이드의 **More** > **Settings**를 열고 사진 하나를 **Background image**로 **Style** 패널에서 고릅니다.제목의 **Text** 요소와 **Button**을 추가합니다. 방문자가 읽고 클릭할 수 있게 **Stop on hover**를 켭니다. ## 표시되지 않는 경우 - **캐러셀 아래에 도트가 없습니다.** 도트는 슬라이드가 두 개 이상일 때만 표시되며, **Dots navigation**이 켜져 있어야 합니다. **Add slide**를 클릭하거나 **Dots navigation**을 **Dots** 패널에서 켭니다. - **Add slide 후에도 새 슬라이드가 표시되지 않습니다.** 새 슬라이드는 끝에 추가되며 열기 전까지는 숨겨져 있습니다. 캐러셀 아래에서 마지막 도트를 클릭합니다. - **슬라이드가 자동으로 움직이지 않습니다.** **Disable auto-play**가 켜져 있습니다. 캐러셀 설정의 **General** 패널에서 끕니다. - **화살표가 없습니다.** **Next/Previous**는 기본적으로 꺼져 있습니다. **Next/Previous** 패널에서 켭니다. - **피커의 Layout 탭에 Carousel이 없습니다.** DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 **Carousel**을 프로필의 **Elements** 아래(`/admin/dxpr_studio/dxpr_builder/profile` 경로)에서 체크합니다. ## 다음 단계 - [Image carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel): 하나의 대화상자에서 설정하는 이미지 전용 슬라이드쇼입니다. - [Adding a Tabs Panel](/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element): 기다리는 대신 방문자가 직접 콘텐츠를 고르게 합니다. - [Animation tab](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab): 각 슬라이드 콘텐츠에 등장 효과를 추가합니다.