슬라이더 블록

스타일 가이드로 돌아가기

슬라이더 블록은 사용자가 두 이미지 사이를 전환할 수 있는 간단한 비포/애프터 블록을 제공합니다. 일반적으로 서로 다른 속성 구성을 표시하는 데 사용됩니다. 이미지의 캡션 정보가 위에 표시되어 사용자가 슬라이더 막대를 해당 제목에서 멀어지면 어떤 이미지가 표시되는지 알 수 있습니다. 먼저 이미지의 아무 곳이나 클릭하면 슬라이더 막대가 해당 위치로 부드럽게 이동하고, 두 번째로 적절한 헤더(예: '조명 구성표')를 클릭하면 막대가 반대편으로 이동하며, 마지막으로 사용자가 직접 막대를 드래그할 수 있습니다.

예제 1

이 슬라이더 블록은 가로 폭이 더 넓은 블록인 레이아웃 1을 사용합니다. 시작 위치가 25%이므로 슬라이더 막대가 기본적으로 이미지의 왼쪽에 있어야 합니다.

예제 2

이 슬라이더 블록은 가로 길이가 더 긴 레이아웃 2를 사용합니다. 시작 위치가 75%이므로 슬라이더 막대가 기본적으로 이미지의 오른쪽에 위치해야 합니다.

예제 3

이 슬라이더 블록에는 여러 개의 슬라이드가 있어 사용자가 슬라이드 사이를 미끄러질 수 있습니다. 시작 위치는 50%이며, 이는 슬라이더 막대가 이미지 중앙에 위치해야 함을 의미합니다.