갤러리 슬라이더
기본 이미지 그리드 또는 간단한 슬라이드 쇼에 지치셨나요? 갤러리 슬라이더 요소는 두 세계의 장점을 모두 결합합니다. 매끄러운 분할 레이아웃이 특징입니다: 탐색용 썸네일 스트립 또는 그리드와 짝을 이루는 크고 아름다운 미리보기 영역. 기본 미리보기를 즉시 업데이트하려면 썸네일을 클릭하세요. 포트폴리오,제품 갤러리 또는 프리미엄 인터랙티브 느낌의 이미지 컬렉션을 선보이는 데 적합합니다. 모든 단일 부품에 대해 별도의 심층적인 사용자 정의 - 썸네일 호버에서 미리보기 캡션까지 - 기능적일 뿐만 아니라 사이트 경험에서 기억에 남는 부분을 갖춘 갤러리를 구축할 수 있습니다.
독특한 분할 레이아웃 디자인
이것은 표준 회전목마가 아닙니다. 전용 갤러리 인터페이스입니다. 미리보기 위치 (왼쪽 또는 오른쪽) 를 선택하고 전체 공간의 백분율로 너비를 제어합니다. 썸네일은 그 옆에 깔끔하게 놓여 있습니다. 작은 화면에서는 “스택 켜기”기능을 사용하여 미리보기와 썸네일을 자동으로 수직으로 쌓아 모든 장치에서 완벽한보기를 보장합니다. 이 레이아웃은 사용자에게 쉽게 탐색 할 수 있는 선명하고 집중된 보기를 제공합니다.
- 유연한 레이아웃 제어: 미리보기를 왼쪽 또는 오른쪽의 초점으로 설정하고 너비를 조절할 수 있습니다 (예, 70%).
- 썸네일 탐색: 사용자는 썸네일을 클릭하여 기본 미리보기를 변경할 수 있습니다. - 직관적이고 빠릅니다.
- 모바일 반응형 스태킹: 수직 공간을 최적으로 사용하기 위해 태블릿 및 모바일에서 레이아웃을 자동으로 스택합니다.
미리보기, 썸네일을 디자인하세요
각 부분을 독립적으로 스타일링하여 완벽하게 응집력 있는 디자인을 구현합니다. 미리보기 영역의 배경,테두리 및 그림자를 스타일링합니다. 전체 타이포그래피,패딩 및 정렬 컨트롤로 미리보기 캡션을 디자인합니다. 그런 다음,썸네일의 스타일: 수직/수평 간격,테두리, 테두리 반경 및 정렬을 제어합니다. 마지막으로 스케일,그림자, 필터 및 컬러 오버레이를 포함하여 미리보기와 썸네일 모두에 대해 별도의 호버 효과를 디자인하여 매력적인 상호 작용을 만듭니다.
- 미리보기 스타일링 완료: 기본 이미지 영역에 배경, 사용자 정의 높이 및 그림자를 추가합니다.
- 썸네일 그리드 제어: 간격과 테두리를 조정하여 깔끔하고 체계적인 썸네일 그리드를 만듭니다.
- 대화형 피드백: 축소판 (크기, 배경색, 오버레이) 및 미리보기 캡션에 대한 고유한 호버 효과를 설정합니다.
부드러운 애니메이션 및 전환
부드럽고 전문적인 모션으로 갤러리에 생기를 불어넣으세요. 메인 프리뷰는 은은한 Ken Burns 팬 앤 줌 효과를 특징으로 할 수 있습니다. 방향 (가로,위로, 아래로) 과 위치를 선택하십시오. 전환 속도 조절 슬라이드 사이 페이드 또는 슬라이드 인되는 우아한 캡션 전환 추가. 이미지 전환에서 썸네일 상의 호버링에 이르기까지 모든 상호 작용은 맞춤형 애니메이션 속도를 가질 수 있으며,연마된 프리미엄 느낌을 위해 완화됩니다.
- Ken Burns 효과: 역동성을 더하기 위해 기본 미리보기 이미지에 느리고 영화 같은 팬 또는 줌을 추가합니다.
- 사용자 지정 전환 속도: 축소판을 클릭하면 주 이미지가 얼마나 빨리 변경되는지 제어합니다.
- 세련된 마이크로 상호 작용: 썸네일과 캡션의 부드러운 호버 전환으로 사용자 경험이 향상됩니다.
전문 갤러리 제어 및 탐색
전문가처럼 갤러리를 관리하세요. 최적의 로드 시간을 위해 이미지 해상도를 선택하세요. 슬라이더에 자동 재생을 활성화하거나 사용자가 수동으로 탐색할 수 있도록 하세요. 미리보기 위에 세련된 탐색 화살표를 추가하고 크기,색상, 호버 상태를 사용자 지정할 수 있도록 모든 설정이 설계되어 기능과 미적 감각을 완벽하게 제어할 수 있습니다.
- 자동 재생 및 반복: 조정 가능한 속도로 자동으로 이미지를 순환하도록 갤러리를 설정합니다.
- 사용자 정의 탐색 화살표: 사이트의 디자인에 맞게 이전/다음 화살표를 스타일.
갤러리 슬라이더에 대해 자주 묻는 질문
표준 이미지 캐러셀에 비해 이것의 가장 큰 장점은 무엇입니까?
표준 회전 목마는 점/화살표로 한 번에 하나의 이미지를 보여줍니다. 이 갤러리 슬라이더는 두 패널 인터페이스를 제공합니다: 큰 미리보기 및 모든 썸네일 옵션의 눈에 보이는 세트. 이를 통해 사용자는 자신의 선택을 한눈에 볼 수 있으며 몇 개 이상의 이미지가있는 갤러리에 훨씬 효율적이고 사용자 친화적 인 모든 이미지로 직접 이동할 수 있습니다.
축소판을 단일 행 대신 격자로 표시할 수 있나요?
예! 썸네일의 스타일링 옵션에는 그리드를 만드는 데 핵심이 되는 가로 및 세로 간격에 대한 컨트롤이 포함되어 있습니다. 컨테이너 너비와 이러한 간격 값을 조정하면 미리보기 옆에 여러 줄로 구성된 썸네일 그리드를 만들 수 있습니다.
Ken Burns 효과가 모든 이미지에 적용되나요?
활성화하면 기본 미리보기 이미지에 Ken Burns 효과 (느린 팬/줌) 가 적용됩니다. 현재 활성화된 사진에 미묘하고 연속적인 애니메이션을 생성하여 갤러리에 생명력과 깊이를 더해줍니다.
많은 고해상도 이미지에서 이것이 어떻게 작동합니까?
최상의 성능을 위해 이미지 해상도 설정을 현명하게 사용하십시오 (예를 들어,디스플레이 크기가 전체 해상도를 필요로하지 않는 경우 “전체”대신 “대형”). 요소는 최적화되었지만 20 + 전체 크기 이미지를로드하면 항상 페이지 속도에 영향을 미칩니다. 게으른로드 또는 여러 슬라이더로 매우 큰 갤러리를 깨뜨리는 것을 고려하십시오.
온라인 스토어의 제품 이미지 갤러리에 사용할 수 있나요?
물론입니다. 여러 각도,색상 또는 세부 정보를 표시해야하는 제품 페이지에 탁월한 선택입니다. 사용자는 다른 색상 변형의 축소판을 클릭하여 기본 미리보기에서 즉시 볼 수 있습니다. 주요 “지금 구매”버튼을 카트 또는 제품 페이지에 연결하기 만하면됩니다.
"Stack on" 기능을 사용하면 모바일에서 어떤 일이 발생합니까?
Stack on 이 “Tablet & Mobile”로 설정되면 수평 나란히 레이아웃이 수직 스택으로 변경됩니다. 큰 미리보기가 맨 위에 표시되고 축소판 그리드가 그 아래에 표시됩니다. 이렇게 하면 미리보기가 크고 볼 수 있게 유지되며 축소판은 여전히 터치스크린에서 쉽게 탭할 수 있습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
