swiper [active] class 활용하여 커스텀 하기
CSS 24.05.09이것을 활용하여 active 상태인 요소에 효과를 주는 것에는 몇 가지 장점이 있습니다
시각적 표시
슬라이드가 활성화되면 사용자는 현재 어떤 슬라이드가 보이는지 알 수 있습니다. 이것은 사용자 경험을 향상시키고 슬라이드 간의 탐색을 쉽게 만들어줍니다.
사용자 반응
사용자는 슬라이드가 활성 상태로 바뀔 때 애니메이션 또는 시각적 피드백을 통해 어떤 슬라이드가 활성화되었는지 인지할 수 있습니다. 이것은 사용자의 행동에 대한 시스템 반응을 제공하는 데 도움이 됩니다.
CSS 및 JS 효과
active 클래스를 사용하면 CSS 또는 JavaScript를 사용하여 활성화된 슬라이드에 효과를 추가할 수 있습니다. 예를 들어, 슬라이드가 활성화되면 텍스트 색상이 변경되거나 배경이 페이드 인/아웃될 수 있습니다.
사용자 지정 가능
active 클래스를 활용하면 슬라이드가 활성화되었을 때 어떤 효과를 적용할지 사용자 지정할 수 있습니다. 이는 디자인의 유연성을 높여줍니다.
동적 제어
JavaScript를 사용하여 active 클래스를 동적으로 제어할 수 있습니다. 예를 들어, 특정 조건이 충족될 때 슬라이드를 활성화시키거나 사용자 상호작용에 따라 슬라이드를 자동으로 활성화할 수 있습니다.
스타일링의 용이성
active 클래스를 통해 슬라이드를 선택적으로 스타일링할 수 있습니다. 이것은 디자인적 일관성을 유지하면서 특정 슬라이드를 강조하는 데 도움이 됩니다.
이러한 장점들은 Swiper를 사용하여 웹사이트나 앱의 슬라이드 컴포넌트를 개발할 때 사용자 경험을 향상시키고
슬라이드의 시각적 효과를 다양하게 구현하는 데 도움이 됩니다.
아래 코드는 간단한 사용 방법 입니다.
[ HTML ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Swiper with Active Class Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <script src="script.js"></script> </body> </html> | cs |
[ CSS ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* Custom Styles for Swiper */ .swiper-slide { display: flex; justify-content: center; align-items: center; font-size: 24px; color: #fff; background-color: #333; transition: background-color 0.3s ease; } /* Active Class Style */ .swiper-slide-active { background-color: #007bff; /* Active Slide Background Color */ color: #fff; /* Active Slide Text Color */ } | cs |
[ script ]
See the Pen Untitled by designkits (@designkits) on CodePen.
