停止刷卡幻燈片自動播放進入，並開始自動播放鼠標離開

如何停止刷卡幻燈片自動播放鼠標輸入，並開始自動播放鼠標離開？我試過.stopAutoplay（）和.startAutoplay（）函數，但沒有爲我工作。停止刷卡幻燈片自動播放進入，並開始自動播放鼠標離開

謝謝這裏是代碼。而我面對控制檯錯誤遺漏的類型錯誤：刷卡.startAutoplay不是一個函數

var swiper = new Swiper('.swiper-container', { 
    pagination: '.swiper-pagination', 
    paginationClickable: true, 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    spaceBetween: 0, 
    loop: true, 
    effect: 'slide', 
    longSwipes: true, 
    autoplay:2000, 
    autoplayDisableOnInteraction:true, 
}); 


$(".swiper-container").mouseenter(function(){ 
    swiper.stopAutoplay(); 
}); 

$(".swiper-container").mouseleave(function(){ 
    swiper.startAutoplay(); 
});

來源

2017-11-11 Mahmudul Hasan Sohag

有像'autoplayDisableOnInteraction'但'disableOnInteraction'別無選擇。 –

您需要使用的選項disableOnInteraction:true，而不是結合自己在這裏看到文檔的事件。 documentation

選項，可以使用下面的自動播放開始停止

swiper.autoplay.start();

swiper.autoplay.stop();

編輯

你的錯誤是你是如何得到的刷卡實例。請參閱下面的演示

$(document).ready(function() { 
 
    new Swiper('.swiper-container', { 
 
    speed: 400, 
 
    spaceBetween: 100, 
 
    autoplay: true, 
 
    disableOnInteraction: true, 
 
    }); 
 
    var mySwiper = document.querySelector('.swiper-container').swiper 
 

 
    $(".swiper-container").mouseenter(function() { 
 
    mySwiper.autoplay.stop(); 
 
    console.log('slider stopped'); 
 
    }); 
 

 
    $(".swiper-container").mouseleave(function() { 
 
    mySwiper.autoplay.start(); 
 
    console.log('slider started again'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" /> 
 
<!-- Slider main container --> 
 
<div class="swiper-container"> 
 
    <!-- Additional required wrapper --> 
 
    <div class="swiper-wrapper"> 
 
    <!-- Slides --> 
 
    <div class="swiper-slide">Slide 1</div> 
 
    <div class="swiper-slide">Slide 2</div> 
 
    <div class="swiper-slide">Slide 3</div> 
 
    ... 
 
    </div> 
 
    <!-- If we need pagination --> 
 
    <div class="swiper-pagination"></div> 
 

 
    <!-- If we need navigation buttons --> 
 
    <div class="swiper-button-prev"></div> 
 
    <div class="swiper-button-next"></div> 
 

 
    <!-- If we need scrollbar --> 
 
    <div class="swiper-scrollbar"></div> 
 
</div>

來源

2017-11-11 13:24:15

不適合我。面對控制檯錯誤無法讀取未定義 –

附加的console.log（刷卡）的特性「一站式」你叫起止是什麼在控制檯 –

打印我添加此的console.log（「Enter」鍵）之前; 這項工作很好，但看到未定義的方法「停止」和「開始」 –

var swiper = new Swiper('.swiper-container', { 
.... 
... 
.... 
}); 

$(".swiper-container").hover(function() { 
    (this).swiper.autoplay.stop(); 
}, function() { 
    (this).swiper.autoplay.start(); 
});

的同一頁面上的多個滑塊通用的解決方案。

來源

2017-11-18 13:45:09

停止刷卡幻燈片自動播放進入，並開始自動播放鼠標離開

回答

相關問題