swiper中有視頻時，滑動停止后視頻停止播放

我們可以用swiper實現這個功能。用法就跟放圖片一樣，只是這里把圖片換成視頻就可以了。

只是如果放的是視頻的話，就有一個問題，就是我們怎么在滑動結束的時候，自動停止播放上一個視頻呢？

我們可以利用 swiper 提供的 onSlideChangeEnd (注意swiper 版本，我用的是swiper 3)方法來做到這種效果，具體代碼如下：

$(".swiper-container").each(function () { //寫each是用於一個頁面出現多個輪播
        var _this = $(this);
        var videoList = $(this).find("video"); //找到輪播圖下面的視頻個數
        var space = $(this).data("space");
        var count = $(this).data("count") || 1;
        var swiperSetting = {};
        swiperSetting.pagination = ".swiper-pagination";
        swiperSetting.preloadImages = false;
        swiperSetting.lazyLoading = true;
        swiperSetting.loop = true;
        swiperSetting.spaceBetween = space;
        swiperSetting.slidesPerView = count;
        if (videoList.length) { 
            swiperSetting.autoplay = false; //如果有視頻，禁止循環播放
            swiperSetting.onSlideChangeEnd = function (swiper) { //滾動停止后視頻停止播放
                for (var i = 0; i < videoList.length; i++) {
                    videoList[i].pause();
                }
            }
        } else {
            swiperSetting.autoplay = 3000; //沒視頻時，每隔3秒播放
        }
        new Swiper(_this, swiperSetting); 
    });