swiper 반응형에 autoplay 멈추는 현상

sooable

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-07-21 (목) 21:07:15 5,004

안녕하세요.. swiper slider width를 고정해서 쓰려고 하는데

css 변동사항이 생기면 autoplay가 자꾸 멈추는 현상이 발생하는데 혹시 같은 현상 겪으신 분들 계실까요?

소스 보고 혹시 어디가 문제인건지 아신다면 한 번 봐주시면 감사하겠습니다..

Copy

//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>

스와이퍼 swiper jquery css3

답변 1개 / 댓글 1개

채택된 답변

+20 포인트

비버팩토리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-07-21 (목) 21:35:58

저도 지금 스와이퍼 사용 해봤는데 지금 스크립트보니까 모바일꺼같은데~ 모바일은 개발자 도구로해서 모발로 설정해서 보면 아무문제 없이 동작되요 이게 좀 그렇도라구요

답변에 대한 댓글 1개

sooable

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-07-22 (금) 08:58:27

모바일이 아니라 pc-모바일 반응형입니다,,
그냥 브라우저 크기 늘렸다줄이든 개발자도구로 보든 문제가 발생하는데
sldeperview가 auto에서 숫자로 변경되는 부분들에서 멈추는거같은데 그래서

observer: true,
observeParents: true,
autoplayDisableOnInteraction: false,

옵션 다 넣었는데도 계속 같은 문제가 발생하네요 답답합니다..ㅠ

답변을 작성하려면 로그인이 필요합니다.

swiper 반응형에 autoplay 멈추는 현상

답변 1개 / 댓글 1개

답변에 대한 댓글 1개

공유하기