이미지 회전목마
이미지 캐러셀은 단순한 슬라이드 이상의 역할을 해야 합니다 – 참여해야 합니다. 마스터 애드온 이미지 캐러셀 요소는 갤러리를 인터랙티브한 경험으로 바꿔줍니다. 탐색을 위한 미세 조정된 컨트롤,매끄러운 애니메이션,모든 단일 상태에 대한 심층적인 스타일링을 갖춘 기본 슬라이더를 뛰어넘어 멀티 컬럼 레이아웃을 만들고,화려한 라이트박스를 구현하며,화살표, 점,아이템을 브랜드와 정확히 일치하도록 스타일링합니다. 포트폴리오,제품 샷,클라이언트 로고 등 이 캐러셀은 전문가처럼 보이고 완벽하게 작동하도록 하는 도구를 제공합니다.
고급 레이아웃 & 동작 제어
캐러셀의 모양과 동작을 완전히 제어합니다. 캐러셀 또는 커버플로우 레이아웃을 선택하십시오. 그리드형 디스플레이의 경우 열당 슬라이드를 설정하고 스크롤할 슬라이드 수를 정의합니다. 자동 재생,루프, 중앙 모드,심지어 대화형 드래그를 위한 그랩 커서 같은 기능을 활성화합니다. 관찰자 옵션은 탭이나 아코디언 내부에서 완벽하게 작동하도록 보장합니다. 이것은 단순한 캐러셀이 아닙니다; 완전히 사용자가 후크할 수 있는 요소입니다.
- 유연한 레이아웃: 열과 스크롤을 완벽하게 제어할 수 있는 다중 행 그리드 또는 클래식 수평 슬라이더를 만듭니다.
- 원활한 상호 작용: 자동 재생 속도, 애니메이션 속도를 설정하고 사용자 친화적인 동작을 위해 호버에서 일시 중지를 활성화합니다.
- 스마트 적응형 기능: 자동 높이를 사용하여 어색한 빈 공간을 피하고 관찰자를 사용하여 숨겨진 컨테이너에서 작동하도록 합니다.
모든 주에서 모든 부분을 스타일링하세요
회전목마를 디자인의 완벽한 부분으로 만드세요. 이미지 스타일만 지정하지 말고 – 각 항목의 컨테이너 스타일을 지정하세요. 일반,호버, 활성 상태에 대한 고유한 배경,테두리, 그림자,패딩을 설정합니다. 항목 간격과 전체적인 불투명도를 조정하세요. 이 수준의 디테일을 통해 대화형 카드를 만들고 활성 슬라이드를 강조 표시하며 사용자가 상호 작용할 때 명확한 시각적 피드백을 제공할 수 있습니다.
- 대화형 피드백: 방문자의 참여를 유도하기 위해 뚜렷한 호버 효과(그림자 리프트 또는 색상 변경 등)를 디자인합니다.
- 활성 슬라이드 하이라이트: 현재 중앙 슬라이드를 다른 테두리 또는 배경으로 눈에 띄게 만듭니다.
- 완벽한 시각적 제어: 완벽한 아이템 프레임을 위해 테두리 반경, 상자 그림자 및 패딩을 사용자 정의합니다.
내비게이션 및 통합 라이트박스
이미지 캐러셀에서 방문자를 올바르게 안내하십시오. 사용자 정의 아이콘,색상, 배경 및 위치 지정 (내부,외부) 으로 우아한 Arrow 탐색을 디자인하십시오. 모바일에서 숨겨보다 깔끔한 모양을 유지하십시오. 그런 다음 내장 된 Lightbox 로 갤러리를 활성화하십시오. 미리보기 아이콘,오버레이 및 캡션 타이포그래피를 사용자 정의하십시오. Fancybox 와 Elementor 중에서 선택하여 아름다운 전체 화면보기 환경에서 이미지를 엽니 다.
- 사용자 정의 탐색 화살표: 스타일 화살표를 처음부터 – 색상, 크기, 배경 및 수평 오프셋을 변경합니다.
- 모바일 최적화: 모바일에서 화살표를 숨기기로 선택하고 스와이프 제스처를 사용하여 기본 느낌을 연출하세요.
- 프리미엄 라이트박스: 사용자 정의 가능한 아이콘과 오버레이로 확대된 보기를 제공하여 회전목마를 전체 갤러리로 만듭니다.
이미지 회전목마에 대해 자주 묻는 질문입니다
Elementor의 기본 이미지 회전목마에 비해 가장 큰 장점은 무엇입니까?
Elementor 의 캐러셀은 간단한 슬라이더에 좋지만 Master Addon 은 훨씬 더 깊은 제어를 제공합니다. 주요 장점은 다음과 같습니다: 캐러셀 항목 자체 스타일링 (이미지뿐만 아니라), 다중 열/행 레이아웃,상태 기반 스타일링 (일반/호버/액티브), 더 많은 탐색 위치 지정 옵션,내장된 사용자 정의 가능한 라이트박스 및 탭/아코디언에 사용할 옵저버 기능.
자동 높이'를 활성화하면 이미지가 늘어나거나 잘리나요?
아니요. 자동 높이는 현재 보이는 가장 높은 슬라이드와 일치하도록 전체 캐러셀 컨테이너의 높이를 조정합니다. 이미지는 다른 설정 (“이미지 크기”와 같은) 에 따라 화면 비율을 유지합니다. 다양한 세로/가로 방향의 이미지가 있는 경우 고정된 높이가 큰 빈 공간을 만들지 못하게 합니다.
호버에 색칠할 회색조 로고 슬라이더에 이것을 사용할 수 있나요?
절대적으로! 이것은 완벽한 사용 사례입니다. 로고 이미지를 업로드하십시오. 회전목마 항목 탭에서 일반 상태 불투명도를 설정하거나 CSS 필터를 사용하여 회색조로 만듭니다. 그런 다음 호버 상태에서 불투명도를 다시 1 로 설정하고 필터를 제거합니다. 내장된 호버 스타일링으로 사용자 정의 코드 없이도 이 효과를 쉽게 얻을 수 있습니다. 또는 로고 슬라이더 요소를 사용하여 완벽한 로고 슬라이더도 만들 수 있습니다.
"Observer" 설정은 어떻게 작동하며 언제 사용해야 합니까?
Observer 는 캐러셀 컨테이너의 변경 사항을 감시합니다. 캐러셀을 탭,아코디언 또는 토글 위젯 안에 넣거나 처음에 숨겨져 있던 곳에 놓을 때 활성화 (예로 설정) 합니다. 이렇게 하면 사용자가 클릭하는 순간 캐러셀이 올바르게 렌더링되고 기능합니다. 상위 컨테이너를 탭 안에서 깨진 경우 일반적으로 수정됩니다.
한 페이지에 자동 재생 기능이 있는 여러 개의 캐러셀이 있으면 성능 문제가 발생합니까?
그것은 할 수 있습니다,당신은 많은 경우 (같은 15+). 각각의 자동 재생 캐러셀은 브라우저가 애니메이션해야 움직이는 요소입니다. 최상의 성능을 위해,당신의 가장 중요한 영웅 캐러셀에 자동 재생을 제한합니다. 다른 사람에 대한,사용자가 수동으로 스크롤 할 수 있도록 고려하십시오. 또한,최적화 된 이미지 크기를 사용하여 (이미지 해상도 설정을 통해) 속도를 결정적이다.
캐러셀 항목을 라이트박스 대신 다른 URL에 연결할 수 있나요?
표시된 기본 기능은 라이트박스가 있는 이미지 갤러리에 대한 것입니다. 항목을 URL 에 연결하려면 마스터 애드온에 의한 로고 캐러셀 요소를 사용해야 합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
