테스트 사이트 - 개발 중인 베타 버전입니다

swiper hover했을때 자동재생 멈추는 법 질문드립니다. 채택완료

sooable 3년 전 조회 3,688

</p>

<p>    <article class="main2">

        <div class="banner_flow">

            <div class="swiper-container subs_swiper">

                <ul class="swiper-wrapper">

                    <?for($i=0;$i<5;$i++){?>

                    <li class="swiper-slide">SUBSCRIPTION ▶ ▶ ▶</li>

                    <?}?>

                </ul>

            </div>

        </div>        

    </article></p>

<p><script>

var swiper = new Swiper('.subs_swiper', {

    slidesPerView: 'auto',

    spaceBetween: 15,

    observer: true,

    observeParents: true,

    autoplay: {

        delay: 0,

        disableOnInteraction: false,

    },

    speed: 20000,

    loop: true,

    allowTouchMove : false,

});</p>

<p>$('.swiper-slide').hover(function(){

    swiper.autoplay.stop();

}, function(){

    swiper.autoplay.start();

});</p>

<p></script></p>

<p>

 

인터넷 찾아보고 적용했는데

swiper.autoplay.stop , swiper.autoplay.start 가 스와이퍼 내장함수?로 알고 있는데 작동하지 않는것같아요..

다른 분들은 바로 되셨다고 하는데 뭐가 문제일까요..

제가 잘못 작성한게 있을까요?

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

답변 2개

채택된 답변
+20 포인트
히햐
3년 전

$('.swiper-slide').hover(function(){ 

    swiper.autoplay.stop();  

    return false; 

}, function(){ 

    swiper.autoplay.start();  

    return false; 

});

 

이렇게 해서 안되시면

 

$('.swiper-slide').on('mouseenter', function(){

    swiper.autoplay.stop();  

    return false;

});

$('.swiper-slide').on('mouseleave', function(){

    swiper.autoplay.start();  

    return false;

});

 

이렇게 함 해보세요

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

답변에 대한 댓글 2개

s
sooable
3년 전
검색해서 나오는 방법들 다 해봤으나 안되더라구요 ㅠ
알려주신 방법도 둘 다 안됩니다 ㅠ 에러 뜨는것도 없고 그냥 무반응이네요..
혹시 몰라 스와이퍼 버전도 바꿔보고 다 해봐도 안되네요 ㅠ

그래도 답변 감사드립니다!
히햐
3년 전
근데 autoplay 딜레이 시간이 0인건 뭔가요? 시간 넣어보셔요,,
안되시면 옵션 하나하나 지워보시면서 충돌하는게 있는지 확인해보세용

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

e
3년 전

구글링해보니 따로 구현을 해야한다는 군요..

https://lpla.tistory.com/147

 

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

답변에 대한 댓글 1개

s
sooable
3년 전
찾아보니 swiper 자체 메서드라 따로 구현없이 구동되고,
autoplay 옵션에 pauseOnMouseEnter 기능도 있다는데

이 방법, 저 방법 다 해도 저는 적용이 안되어서요 ㅠㅠ

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

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

로그인