swiper 반응형에 autoplay 멈추는 현상
본문
안녕하세요.. swiper slider width를 고정해서 쓰려고 하는데
css 변동사항이 생기면 autoplay가 자꾸 멈추는 현상이 발생하는데 혹시 같은 현상 겪으신 분들 계실까요?
소스 보고 혹시 어디가 문제인건지 아신다면 한 번 봐주시면 감사하겠습니다..
//html
<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>
//스타일
<style>
.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;}
@media(max-width: 1650px){
.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;}
}
@media(max-width: 700px){
.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%);}
}
@media(max-width: 580px){
.main2 .main2_sd_swiper{width: 300px;}
.main2_sd_swiper .swiper-slide .item{width: 300px;height: 350px;padding: 80px 0;}
}
</style>
//스크립트
<script>
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,
},
},
});
</script>
답변 1
저도 지금 스와이퍼 사용 해봤는데 지금 스크립트보니까 모바일꺼같은데~ 모바일은 개발자 도구로해서 모발로 설정해서 보면 아무문제 없이 동작되요 이게 좀 그렇도라구요
모바일이 아니라 pc-모바일 반응형입니다,,
그냥 브라우저 크기 늘렸다줄이든 개발자도구로 보든 문제가 발생하는데
sldeperview가 auto에서 숫자로 변경되는 부분들에서 멈추는거같은데 그래서
observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,
옵션 다 넣었는데도 계속 같은 문제가 발생하네요 답답합니다..ㅠ
답변을 작성하시기 전에 로그인 해주세요.
