controller.control을 사용해서 연동했을 때 오류가 하나 발생했다.
swiper의 width값을 100%로 설정했을 경우,
개발자도구 확인 결과 브라우저 창 크기를 늘였다 줄였다 할 때마다 width값이 반영이 안됐다.
loopedSlides로 두 스와이퍼의 duplication을 맞춰봐도 여전히 오류 해결불가..ㅜㅜ
물론 폰or태블릿 으로만 접속했을 시 상관없지만
pc접속 시 사용자가 임의로 창 크기를 늘였다 줄였다 할 경우 슬라이드가 삐꾸난다.
그래서 그냥 다른 연동법을 씀.
<html>
<div class="whole">
<div class="inner">
<div class="swiper-container-main">
<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 class="swiper-slide">SLIDE 4</div>
</div>
</div>
</div>
</div>
<div class="whole sub_slide">
<div class="inner">
<div class="swiper-container-sub">
<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 class="swiper-slide">SLIDE 4</div>
</div>
</div>
</div>
</div>
<css>
* {
padding: 0; margin: 0;
}
.whole {
overflow: hidden;
max-width: 100%;
margin: auto;
}
.whole.sub_slide {
width: 500px;
margin-top:20px;
}
.inner {
position: relative;
}
.swiper-container-main,
.swiper-container-sub {
width: 100%;
height: 100%;
overflow: visible;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.swiper-slide:nth-of-type(2n){
background-color: #ff690b;
}
.swiper-slide:nth-of-type(2n+1){
background-color: #00b047;
}
.swiper-slide:nth-of-type(4n){
background-color: #eed571;
}
<js>
const swiper2 = new Swiper('.swiper-container-sub', {
slidesPerView: 1,
spaceBetween: 0,
effect:"fade",
fadeEffect: {
crossFade: true
},
loop: true,
loopedSlides:4,
});
const swiper = new Swiper('.swiper-container-main', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
loopedSlides:4,
autoplay: {
delay:2500,
},
thumbs: {
swiper: swiper2,
},
});이 때 swiper-container-main 을 swiper-container-sub보다 나중에 써 준다.
thumbs 때문인데 swiper2를 먼저 위에서 정의해야 thumbs가 swiper2를 인식해서 작동한다.
결론은 thumbs가 포함 된 스와이퍼를 가장 밑에 써줘야한다.
thums 를 사용하니 pc에서 width값으로인한 오류는 발생하지 않았다.
'개발 > javascript' 카테고리의 다른 글
| swiper controller.control 연동 오류 (0) | 2023.02.13 |
|---|---|
| stroke-dasharray / stroke-dashoffset 활용, 애니메이션 만들기 (0) | 2023.02.13 |
| loopedSlides의 역할 / 파라미터 duplicate 개수란? (0) | 2022.12.28 |
| [jQuery]$(window).scroll() 활용 / scroll 이벤트 +예제 (0) | 2022.12.28 |
| 간단하게 마우스커서 이미지 변경 (다양한 조건에 따라 커서 커스텀 하기) (2) | 2022.12.15 |
