swiper 轮播设置步骤

àì夳堔傛蜴生んèń 2021-07-24 14:59 638阅读 0赞

引入轮播图文件:  
![在这里插入图片描述][20191229172005561.png]  
![在这里插入图片描述][2019122917202197.png]![在这里插入图片描述][20191229172034663.png]  
引入轮播图动画文件:  
![在这里插入图片描述][20191229172045680.png]![在这里插入图片描述][20191229172052818.png]  
**引入框架:**

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        
        <div class="swiper-pagination"></div>
        
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        
        <div class="swiper-scrollbar"></div>
    </div>

**js文件**

轮播样式设置  
[轮播样式设置][Link 1]

--------------------

**动画效果**  
js文件

在需要动画的地方添加动画  
![在这里插入图片描述][2019122917353827.png]  
如：

动画效果地址:  
[动画效果在地址中的第四条][Link 2]

--------------------

整个代码示例:

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
    	      <div class='lb-cover ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
            		<div class='lb-info ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
    				<h1 align="center">我在爱尔兰，看着世界的阳光</h1>
    	                <p>     爱尔兰（爱尔兰语：Poblacht na hÉireann；英语：Republic of Ireland）， 是一个西欧的议会共和制国家，西邻大西洋，东靠爱尔兰海，与英国隔海相望，是北美通向欧洲的通道。爱尔兰自然环境保持得相当好，素有“翡翠岛国”之称，全国绿树成荫，河流纵横，草地遍布，所以又有“绿岛”和“绿宝石”之称。</p>
    	        	
    	        </div>
            <img src="img/lb1.jpg" alt=""/></div>
            <div class="swiper-slide">
    			 <div class='lb-cover ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
            		<div class='lb-info ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
    				<h1 align="center">我在新西兰，享受世界的平静</h1>
                    <p>     新西兰（爱尔兰语：Poblacht na hÉireann；英语：Republic of Ireland）， 是一个西欧的议会共和制国家，西邻大西洋，东靠爱尔兰海，与英国隔海相望，是北美通向欧洲的通道。爱尔兰自然环境保持得相当好，素有“翡翠岛国”之称，全国绿树成荫，河流纵横，草地遍布，所以又有“绿岛”和“绿宝石”之称。</p>
            	
            	</div>
            	<img src="img/lb2.jpg" alt=""></div>
            <div class="swiper-slide ">
    			 <div class='lb-cover ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
            		<div class='lb-info ani' swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
    				<h1 align="center">我在旅途，丈量世界的地图</h1>
                    <p>     爱尔兰（爱尔兰语：Poblacht na hÉireann；英语：Republic of Ireland）， 是一个西欧的议会共和制国家，西邻大西洋，东靠爱尔兰海，与英国隔海相望，是北美通向欧洲的通道。爱尔兰自然环境保持得相当好，素有“翡翠岛国”之称，全国绿树成荫，河流纵横，草地遍布，所以又有“绿岛”和“绿宝石”之称。</p>
            	</div>
            <img src="img/lb3.jpg" alt=""></div>
        </div>
        
        <div class="swiper-pagination"></div>
        
        
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        
        <div class="swiper-scrollbar"></div>
    </div>

js文件

//轮播图
    var mySwiper = new Swiper ('.swiper-container', { 
       // direction: 'vertical',
        loop: true,
        //轮播时间
        autoplay:3500,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
    
        onInit: function(swiper){  //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
      }, 
      onSlideChangeEnd: function(swiper){  
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
      } 
      })

[20191229172005561.png]: /images/20210724/e692115cef53413cae7b837f130deb25.png
[2019122917202197.png]: https://img-blog.csdnimg.cn/2019122917202197.png
[20191229172034663.png]: /images/20210724/804eedd0d093463d82e7095762f54ff0.png
[20191229172045680.png]: https://img-blog.csdnimg.cn/20191229172045680.png
[20191229172052818.png]: /images/20210724/cc2bfa8d7ec84f7ab5f2ac6cefc8e0d3.png
[Link 1]: https://3.swiper.com.cn/api/Effects/2015/0308/195.html
[2019122917353827.png]: /images/20210724/edf89225263e4cffb9bd77c63b05439e.png
[Link 2]: https://3.swiper.com.cn/usage/animate/index.html