swiper轮播图包含视频或图片

swiper轮播图——视频轮播、图片轮播、视频和图片轮播

可参考线上网站：http://demo.xinc.cebest.com/MyFile/banner_video.html

1、html

<div class="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/banner.jpg" alt="">
                <video data-autoplay autoplay  src="./video/zhongqi.mp4" muted="" class="pc-video" poster="./img/banner.jpg" webkit-playsinline="true" x-webkit-airplay="true" x5-playsinline="true" playsinline="true"></video>
                <div class="text">
                    <p>副标题</p>
                    <h2>主标题</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="./img/banner.jpg" alt="">
                <video data-autoplay autoplay  src="./video/1.mp4" muted="" class="pc-video" poster="./img/banner.jpg" webkit-playsinline="true" x-webkit-airplay="true" x5-playsinline="true" playsinline="true"></video>
                <div class="text">
                    <p>副标题</p>
                    <h2>主标题</h2>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="./img/banner.jpg" alt="">
                <div class="text">
                    <p>副标题</p>
                    <h2>主标题</h2>
                </div>
            </div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- Add Pagination -->
        <div class="pagination-all">
            <div class="swiper-pagination"></div>
            <div class="sign">
                <span class="iconfont play">&#xe65c;</span>
                <span class="iconfont pause">&#xe60e;</span>
            </div>
        </div>
        <div class="slide-next">
            <span class="iconfont">&#xe779;</span>
        </div>
    </div>
</div>

2、js

var width=$(window).width();

// 获取第一个视频时长
$(".banner .swiper-slide").each(function(){
    if($(this).has('video').length){
        $(this).find('video').attr('id','video');
        return false;
    }
});

var audioE2  = document.getElementById("video");
// 如果swiper有视频
if(audioE2){
    // 上传了视频,等待视频加载完
    audioE2 .onloadedmetadata = function() {
        var tol=audioE2.duration;
        // tol=tol*1000;
        var banner_swiper = new Swiper('.banner .swiper-container',{
            speed:1000,
            loop:true,
            // autoplay:false,
            autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.banner .swiper-button-next',
                prevEl: '.banner .swiper-button-prev',
            },
            pagination: {
                el: '.banner .swiper-pagination',
                clickable: true,
            },
            on: {
                init: function(){
                    $('.banner .swiper-slide').eq(this.activeIndex).find('.text').addClass('active');
                },
                slideChangeTransitionStart: function(){
                    $('.banner .swiper-slide').find('.text').removeClass('active').eq(this.activeIndex).addClass('active').siblings();
                    var _target = this;
                    var curVideo = this.$el.find(".swiper-slide-active").find("video");
                    // tol=curVideo.duration;
                    //暂停所有视频
                    function pauseAll(ele){
                        ele.find("video").each(function(){
                            $(this)[0].pause();
                        });
                    }
                    pauseAll(this.$el);
                    //轮播间隔时间
                    console.log(tol)
                    _target.params.autoplay.delay = tol*1000;
                    //判断当前激活元素是否有视频
                    if(curVideo.length > 0){
                        console.log("有视频！");
                        this.autoplay.stop();
                        curVideo[0].currentTime = 0;
                        curVideo[0].play();
                        curVideo[0].removeEventListener('ended', function (){}, false);
                        curVideo[0].addEventListener('ended', function (){
                            if($('.banner .sign').hasClass('active')){
                                // 此时是暂停状态
                            }else{
                                _target.slideNext();
                            }

                        }, false);
                    }else{
                        console.log("无视频！");
                        _target.params.autoplay.delay=5000;
                        _target.autoplay.start();
                        $('.banner .sign').removeClass('active');
                        flag=true;
                    }

                },
            },
        });
        $('.banner .sign').click(function () {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                banner_swiper.slideNext();
                banner_swiper.autoplay.start();
                flag=true;
            }else{
                $(this).addClass('active');
                banner_swiper.autoplay.stop();
                flag=false;
            }
        });

    }
}else{
    // 没上传视频
    var banner_swiper = new Swiper('.banner .swiper-container',{
        speed:1000,
        loop:true,
        // autoplay:false,
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.banner .swiper-button-next',
            prevEl: '.banner .swiper-button-prev',
        },
        pagination: {
            el: '.banner .swiper-pagination',
            clickable: true,
        },
        on: {
            init: function(){
                $('.banner .swiper-slide').eq(this.activeIndex).find('.text').addClass('active');
            },
            slideChangeTransitionStart: function(){
                $('.banner .swiper-slide').find('.text').removeClass('active').eq(this.activeIndex).addClass('active').siblings();
            },
        },
    });
    $('.banner .sign').click(function () {
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            banner_swiper.slideNext();
            banner_swiper.autoplay.start();
            flag=true;
        }else{
            $(this).addClass('active');
            banner_swiper.autoplay.stop();
            flag=false;
        }
    });
}



$('.slide-next').click(function () {
    var st=$('.area').offset().top;
    $("html,body").animate({scrollTop:st}, 1000);
});

3、css

.banner {
   100%;
  overflow: hidden;
  position: relative;
}
.banner .swiper-container .swiper-wrapper .swiper-slide {
  overflow: hidden;
  height: 0;
  padding-bottom: 49%;
  position: relative;
}
.banner .swiper-container .swiper-wrapper .swiper-slide img {
   100%;
}
.banner .swiper-container .swiper-wrapper .swiper-slide video {
  position: absolute;
   100%;
  left: 0;
  top: 0;
  z-index: 2;
  height: 100% !important;
  object-fit: cover;
}
.banner .swiper-container .swiper-wrapper .swiper-slide .text {
  position: absolute;
   100%;
  top: 27%;
  left: 0;
  z-index: 3;
  text-align: center;
}
.banner .swiper-container .swiper-wrapper .swiper-slide .text p {
  text-align: center;
  font-size: 2.3rem;
  color: #fff;
  position: relative;
  opacity: 0;
  text-shadow: 4px 8px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -webkit-transform: translateY(2rem);
  transition: all 1s ease 0.5s;
  -webkit-transition: all 1s ease 0.5s;
  -moz-transition: all 1s ease 0.5s;
  -ms-transition: all 1s ease 0.5s;
  display: inline-block;
}
.banner .swiper-container .swiper-wrapper .swiper-slide .text h2 {
  margin-top: 1.2rem;
  font-weight: bold;
  text-align: center;
  font-size: 2.6rem;
  color: #fff;
  position: relative;
  opacity: 0;
  text-shadow: 4px 8px 10px rgba(0, 0, 0, 0.14);
  transform: translateY(2rem);
  -ms-transform: translateY(2rem);
  -webkit-transform: translateY(2rem);
  transition: all 1s ease 1s;
  -webkit-transition: all 1s ease 1s;
  -moz-transition: all 1s ease 1s;
  -ms-transition: all 1s ease 1s;
}
.banner .swiper-container .swiper-wrapper .swiper-slide .text.active p {
  transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  opacity: 1;
}
.banner .swiper-container .swiper-wrapper .swiper-slide .text.active h2 {
  transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  opacity: 1;
}
.banner .swiper-container .swiper-button-prev {
   2.8rem;
  height: 2.8rem;
  background: none;
  margin-top: 0;
  left: 2%;
  top: 46%;
}
.banner .swiper-container .swiper-button-prev:before {
  content: 'e601';
  font-family: iconfont;
  font-size: 2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: #fff;
}
.banner .swiper-container .swiper-button-prev:hover:before {
  color: #31a338;
}
.banner .swiper-container .swiper-button-next {
   2.8rem;
  height: 2.8rem;
  background: none;
  margin-top: 0;
  right: 2%;
  top: 46%;
}
.banner .swiper-container .swiper-button-next:before {
  content: 'e683';
  font-family: iconfont;
  font-size: 2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: #fff;
}
.banner .swiper-container .swiper-button-next:hover:before {
  color: #31a338;
}
.banner .swiper-container .pagination-all {
  position: absolute;
  bottom: 8rem;
   100%;
  left: 0;
  z-index: 100;
  text-align: center;
}
.banner .swiper-container .pagination-all .sign {
  display: inline-block;
   1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  margin-left: 0.5rem;
  cursor: pointer;
}
.banner .swiper-container .pagination-all .sign span {
  font-size: 12px;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 1.4rem;
  position: relative;
}
.banner .swiper-container .pagination-all .sign span.play {
  left: 1px;
}
.banner .swiper-container .pagination-all .sign span.pause {
  display: none;
}
.banner .swiper-container .pagination-all .sign.active span.play {
  display: none;
}
.banner .swiper-container .pagination-all .sign.active span.pause {
  display: block;
}
.banner .swiper-container .swiper-pagination {
  position: relative;
  display: inline-block;
  text-align: left;
}
.banner .swiper-container .swiper-pagination .swiper-pagination-bullet {
   2rem;
  height: 4px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.7);
  opacity: 1;
  margin: 0 0.2rem;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
}
.banner .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #31a338;
}
.banner .slide-next {
   3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: 2rem;
  left: 50%;
  margin-left: -1.5rem;
  z-index: 2;
  cursor: pointer;
  animation-name: bounces;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-fill-mode: both;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
}
.banner .slide-next span {
  display: block;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  text-align: center;
  line-height: 3rem;
  color: #fff;
  font-size: 1rem;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
}
.banner .slide-next:hover {
  background: #fff;
}
.banner .slide-next:hover span {
  color: #31a338;
}