Swiper 내부 영역 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상 해결하기

How to Resolve Unintended Slide Events When Clicking Inside a Swiper Slide 이번 포스팅에서는 Swiper 캐러셀 내부의 특정 영역을 클릭 했을 때, 사용자가 의도하지 않은 스와이퍼 슬라이드 이벤트가 발생되는 현상을 해결하는 방법을 다뤄보겠습니다. 이 문제를 예를 들어 설명하자면 스와이퍼에 동영상 영역이 있고 그 동영상을 제어하는 재생/정지 버튼을 만들었는데, 그 버튼을 클릭했을 때 의도하지 않게 다음 슬라이드로 넘어가는 현상과 같은 문제입니다. 그럼 해결 방법을 알아보기 전, 해결에 사용되는 개념을 간단히 정리해보겠습니다. 1. event.stopPropagation() event.stopPropagation() 메서드는 이벤트가 캡처링/버블링 ..

• format_list_bulleted Tech/JavaScript
• · 2023. 10. 11.
• textsms

Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기

브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다. 1. 문제 확인 먼저 앞서 서론에서 이야기한 문제를 직접 확인해보겠습니다. 예시 화면은 좌, 우측의 각각의 영역이 있고 전체 너비 100%를 각각 60%, 40%로 나눠 가집니다. 좌측 영역에는 swiper 플러그인이 사용되었고, 우측 영역은 일반 콘텐츠이며 옆에 있는 QUICK 버튼을 클릭하면 열렸다 닫히는 형태의 UI 입니다. See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on..

• format_list_bulleted Tech/JavaScript
• · 2023. 8. 30.
• textsms

섬네일 갤러리 구현 / Gallery with Thumbnail Slider / Swiper - Thumbs gallery

준비하기 CDN 연결 섬네일형 갤러리 생성을 위해 캐러셀 플러그인 코어 소스를 연결합니다. 본 글에서는 Swiper API 를 사용합니다. 아래 코드를 head 태그 사이에 붙여 넣어줍니다. 마크업하기 총 두 개의 swiper 마크업이 필요합니다. 이미지를 크게 보여줄 메인 슬라이드와 섬네일로 사용할 섬네일 슬라이드를 각각 마크업합니다. CSS 기본 코어 소스의 CSS 덕분에 사용하는 데에 크게 문제가 없지만, 원하는 디자인이 있다면 CSS를 추가해줍니다. .gallery-box{margin:0 auto;max-width:800px;} .gallery-box .gallery-main-box{padding:0 0 10px;} .gallery-box .gallery-main-box .swiper-slide ..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 11.
• textsms