코딩하는 둥둥

요구사항 swiper가 스와이핑될 때마다 swiper 외부 요소의 값도 변경되는 로직을 구현하기위해 swiper의 index값을 스와이퍼 외부에서 사용할수 있도록 해야했다. 구현 슬라이드의 인덱스를 변수에 저장해, 그 변수를 활용해 외부 요소의 값을 변경하도록 구현하려고했다. 기존에 스와이핑 될때마다 css를 변경하는 로직을 slideChange에서 구현했기때문에 마찬가지로 swiper index도 slideChange에서 realIndex를 사용해 변수로 넘겨주고자했다. 이때 activeIndex가 아니라 realIndex를 사용한 이유는 loop:true를 사용했기때문에 activeIndex가 현재 슬라이드 순서와 달랐기때문이다. activeIndex : 현재 활성 슬라이드의 인덱스 번호 ※ loop..

요구사항 슬라이드의 오른쪽에 그라데이션/페이딩 효과 주기 해결 방법 https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel mask속성에서 linear-gradient사용하기 .swiper-container { mask-image: linear-gradient(to right, white 90%, transparent 97%); } References. https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel

🔗 https://sir.kr/qa/479420 처음에는 중앙정렬로 잘 노출되다가 슬라이드를 하나 넘기면 위치가 이상해진다. swiper 슬라이드 가운데 정렬 > SIR 이런 슬라이드 형태를 구현하고자 하는데요 [code] var edtSldCnt = new Swiper(".edtSldCnt", { slidesPerView : 'auto', slideToC sir.kr 위 링크와 같은 형태의 슬라이드를 구현하려고 했고, 같은 형태의 오류가 발생했다. 링크에서는 slideChange로 슬라이드 이동 시 active 슬라이드의 이미지 크기를 다시 원래대로 돌려주는 방법을 사용해보라는 답변이 달렸지만, 나의 경우 이미 slideChange를 통해 acitve 여부에 따라 이미지의 크기를 변경하고 있는 상태였다..

watchOverflow: true와 loop:true를 함께 사용하기 요구사항 슬라이드가 한 개일때 페이지네이션과 버튼 보이지 않도록 구현 → watchOverflow: true 슬라이드가 여러개 있을 때 마지막 슬라이드에서 스와이프 시 첫 슬라이드로 이동 → loop:true Swiper Options watchOverflow: true : 슬라이드가 1개일때 pager와 button 숨김 loop:true : 슬라이드 반복 여부. 위 요구사항을 구현하기 위해 watchOverflow: true와 loop:true를 같이 사용하려고 했는데 watchOverflow: true와 loop:true는 같이 사용할 수 없었다. 두 옵션을 같이 사용할 경우에는 watchOverFlow가 동작을 멈추는 문제가 ..

Swiper 속성 loop : 슬라이드 반복 여부. true/false freeMode : 슬라이드 넘길때 위치 고정 여부. true/false autoplay: 자동슬라이드. true/false slidesPerView: 한 번에 보여지는 슬라이드의 수. 기본값 auto spaceBetween : 슬라이드 사이 여백 centeredSlides : active한 슬라이드를 중앙에 배치(센터모드). true/false pagination: 페이징 설정 navigation: 네비게이션 설정 breakPoints : 화면 크기에 따라 보여지는 모습이 바뀜(반응형 설정). width값으로 조정. roundLengths: 일반 해상도 화면에서 텍스트가 흐려지는 것을 방지하기 위해 슬라이드 너비와 높이 값을 반올림..