swiper 自定义的一些需求

Posted 2020-12-22 cn-oldboy

给每个元素不同的停留时间

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide diyi" data-swiper-autoplay="500"  swiper-animate-effect="fadeOut" ><img src="static/images/tu1.jpg"></div>
      <div class="swiper-slide  video" data-swiper-autoplay="24000">
		<video width="100%" height="100%" autoplay>
			<source src="static/test.mp4" type="video/mp4">
		  您的浏览器不支持Video标签。
		</video>
	  </div>
      <div class="swiper-slide" data-swiper-autoplay="5000"><img src="static/images/tu2.jpg"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

让某些元只轮播一次

<script>
    var mySwiper = new Swiper(‘.swiper-container‘, {
		on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){ 
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        //this.slides.eq(this.activeIndex).find(‘.ani‘).removeClass(‘ani‘); 动画只展现一次，去除ani类名
      }},
		loop : true,
		speed:1000,
		autoplay : {
    	delay:5000
 		 },
      navigation: {
        nextEl: ‘.swiper-button-next‘,
        prevEl: ‘.swiper-button-prev‘,
      },
	});
	

	setInterval(function(){
                    $(".swiper-wrapper .video").remove();
                    $(".swiper-wrapper .diyi").attr("data-swiper-autoplay","5000");;
                    mySwiper.update(true);
                },24500);
  </script>