swiper 반응형에 autoplay 멈추는 현상 채택완료
sooable
3년 전
조회 4,229
안녕하세요.. swiper slider width를 고정해서 쓰려고 하는데
css 변동사항이 생기면 autoplay가 자꾸 멈추는 현상이 발생하는데 혹시 같은 현상 겪으신 분들 계실까요?
소스 보고 혹시 어디가 문제인건지 아신다면 한 번 봐주시면 감사하겠습니다..
</p>
<p>//html</p>
<p><div class="main2_sd">
<div class="swiper-container main2_sd_swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="item">
<div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_1.png" alt=""></div>
<div class="desc">Blockchain</div>
</div>
</li>
<li class="swiper-slide">
<div class="item">
<div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_2.png" alt=""></div>
<div class="desc">AR / ITO</div>
</div>
</li>
<li class="swiper-slide">
<div class="item">
<div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_3.png" alt=""></div>
<div class="desc">Game</div>
</div>
</li>
<li class="swiper-slide">
<div class="item">
<div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_4.png" alt=""></div>
<div class="desc">Metaverse</div>
</div>
</li>
<li class="swiper-slide">
<div class="item">
<div class="thum"><img src="<?=G5_THEME_IMG_URL?>/m2_5.png" alt=""></div>
<div class="desc">NFT</div>
</div>
</li>
</ul>
</div>
</div></p>
<p>
//스타일</p>
<p><style></p>
<p>.main2_sd{color: #fff;margin-top: 100px;margin-left: 240px;}
.main2_sd_swiper{text-align: center;}
.main2_sd_swiper .swiper-slide{width: auto;margin-right: 67px;}
.main2_sd_swiper .swiper-slide .item{width: 300px;height: 350px;border-radius: 30px;background: url('../img/m2_sd_bg.png') 50% 50%;background-size: cover;padding: 80px 0;display: flex;flex-direction: column;align-items: center;justify-content: space-around;box-shadow: 33px 51px 27px 0px rgba(0, 0, 0, 0.15);margin-bottom: 80px;}
.main2_sd_swiper .swiper-slide .thum{}
.main2_sd_swiper .swiper-slide .thum img{}
.main2_sd_swiper .swiper-slide .desc{font-family: 'Montserrat', sans-serif;font-weight: 500;font-size: 22px;}</p>
<p> </p>
<p>@media(max-width: 1650px){</p>
<p> .main2_sd{margin-left: 10%;margin-top: 70px;}
.main2_sd_swiper .swiper-slide{margin-right: 50px;}
.main2_sd_swiper .swiper-slide .thum img{transform: scale(0.9);transform-origin: center center;}</p>
<p>}</p>
<p> </p>
<p>@media(max-width: 700px){</p>
<p> .main2_sd{margin-left: 0;}
.main2 .main2_sd_swiper{width: 85%;overflow: visible;}
.main2_sd_swiper .swiper-slide{}
.main2_sd_swiper .swiper-slide .item{box-shadow: 0 20px 20px 0px rgb(0 0 0 / 15%);}</p>
<p>}</p>
<p> </p>
<p>@media(max-width: 580px){</p>
<p> .main2 .main2_sd_swiper{width: 300px;}
.main2_sd_swiper .swiper-slide .item{width: 300px;height: 350px;padding: 80px 0;}</p>
<p>}</p>
<p></style></p>
<p> </p>
<p>//스크립트</p>
<p><script></p>
<p>var swiper = new Swiper('.main2_sd_swiper', {
slidesPerView: 'auto',
spaceBetween: 0,
centeredSlides: false,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
speed: 1500,
loop: true,
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
breakpoints:{
580: {
slidesPerView: 1,
spaceBetween: 20,
centeredSlides: true,
},
},
});</p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
그냥 브라우저 크기 늘렸다줄이든 개발자도구로 보든 문제가 발생하는데
sldeperview가 auto에서 숫자로 변경되는 부분들에서 멈추는거같은데 그래서
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
옵션 다 넣었는데도 계속 같은 문제가 발생하네요 답답합니다..ㅠ