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

sooable

2022-07-18 (월) 10:36:42 4,491

Copy

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

<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,
});

$('.swiper-slide').hover(function(){
    swiper.autoplay.stop();
}, function(){
    swiper.autoplay.start();
});

</script>

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

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

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

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

스와이퍼 swiper 제이쿼리 jquery

답변 2개 / 댓글 3개

채택된 답변

+20 포인트

닌니디자인

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-07-20 (수) 02:08:00

Copy

$('.swiper-slide').hover(function(){ 
    swiper.autoplay.stop();  
    return false; 
}, function(){ 
    swiper.autoplay.start();  
    return false; 
});

이렇게 해서 안되시면

Copy

$('.swiper-slide').on('mouseenter', function(){
    swiper.autoplay.stop();  
    return false;
});
$('.swiper-slide').on('mouseleave', function(){
    swiper.autoplay.start();  
    return false;
});

이렇게 함 해보세요