캐러셀 레이아웃 추가하기.
인용문, 혜택, 공지처럼 한 자리에서 콘텐츠를 돌아가며 보여주고 싶을 때 Carousel 레이아웃 요소를 사용합니다. 완성되면 자동으로 넘어가는 슬라이드가 생기고, 슬라이드마다 도트 하나가 표시됩니다. Image carousel과 달리 각 슬라이드에는 어떤 요소든 들어갑니다. 텍스트, 이미지, 버튼 등입니다. 예제에서는 수강생 인용문 슬라이더를 만듭니다.
캐러셀 레이아웃 추가하기
- 컬럼에 마우스를 올리고 컨트롤 표시줄의 +를 클릭하여 요소 선택기를 엽니다.
- 탭 Layout에서 항목 Carousel을 클릭합니다.
- 먼저 설정이 열립니다. 기본값을 유지하려면 Save를 클릭합니다. 빈 슬라이드 하나가 있는 캐러셀이 나타납니다.
- 슬라이드 안의 +를 클릭하고 Text 요소 같은 콘텐츠를 추가합니다.
- 슬라이드를 추가하려면 캐러셀에 마우스를 올리고 컨트롤 표시줄의 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: 하나의 대화상자에서 설정하는 이미지 전용 슬라이드쇼입니다.
- Adding a Tabs Panel: 기다리는 대신 방문자가 직접 콘텐츠를 고르게 합니다.
- Animation tab: 각 슬라이드 콘텐츠에 등장 효과를 추가합니다.