swiper 自定义的一些需求

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

<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>
posted @   风意不止  阅读(651)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示