목록으로

swiper 반응형에 autoplay 멈추는 현상 채택완료

sooable

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

3년 전 조회 4,233

답변 1

안녕하세요.. 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>

#스와이퍼 #swiper #jquery #css3

답변 1개

정렬:

채택된 답변

+20 포인트

비버팩토리

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

3년 전

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

sooable

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

3년 전

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

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

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