HTML Slide 01 Slide 02 Slide 03 swiper 영역과 swiper가 넘어갈 때 마다 조작될 영역을 마크업한다. 이 때, 조작될 영역은 swiper 영역에 있어도 되고 바깥에 있어도 상관없다. script var swiper = new Swiper('.mySwiper', { on: { slideChange: function(){ $('.box').removeClass('active'); $('.box').eq(this.realIndex).addClass('active'); }, }, }); slideChange는 활성화 된 슬라이드(swiper-slide-active)가 바뀔 때마다 호출된다. realIndex는 활성화 된 슬라이드의 index번호를 반환한다. 이 둘을 사용하면 sw..

슬라이드에서 autoplay(자동재생)를 적용한 경우 마우스 오버, 아웃 시 멈춤, 재생하는 이벤트 조작법 autoplay 적용 var swiper = new Swiper('.mySwiper',{ autoplay: { delay: 2000, // 2초 disableOnInteraction: false, }, }); disableOnInteraction의 기본값은 true로 사용자가 슬라이드를 움직일(마우스 드래그로 슬라이드 전환) 경우 자동재생이 멈추게 되므로 이 기능은 비활성화 하는 편이 좋다. 마우스 오버/아웃 시 슬라이드 멈춤/재생 // JS let $slides = document.querySelectorAll('.swiper-slide'); for(let i of $slide) { i.addEv..

기본 세팅 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 script(옵션)var swiper = new Swiper('.mySwiper', { direction: 'horizontal' // 기본값. 수직은 'vertical' slidesPerView : 'auto', // 화면에 보여질 슬라이드의 갯수(숫자도 가능) slidesPerGroup : 3, // 그룹으로 묶을 슬라이드의 갯수 (slidePerView와 같으면 좋음) spaceBetween: 10, // 슬라이드..

.swiper-wrapper { display: -webkit-inline-box } swiper 사용 시 세로정렬이 되는 경우 swiper-wraper에 해당 값을 입력하면 된다. 참고사이트 https://morohaji.tistory.com/21

HTML (기본 스와이프 마크업) 1 2 3 CSS /* 프로세스바 위치 및 크기 조정 */ #process .pro_pagination2 { position: absolute; top: 695px; width: 100%; height: 2px; } /* progressbar 배경색 (채워지기 전 바탕색) */ .swiper-pagination-progressbar { background: rgba(158, 158, 158, 0.178); } /* progressbar 채워지는 색 */ .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: var(--whoz-purple); } JS var process..

swiper HTML Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 1) 단색 배경 적용 CSS /* 선택안된 기본 불릿 */ .swiper-pagination-bullet { /* 원하는 이미지의 사이즈 */ width: 50px; height: 50px; opacity: 1; background: transparent; border-radius: 0; } /* 선택된 불릿 */ .swiper-pagination-bullet-active { background: red; background: linear-gradient(315deg,#17a7c6,#1b39ab); /* 적용 안됨 */ } jQuery var swiper = new Swiper(".mySwiper2..