Swiper 轮播插件

最新推荐文章于 2024-07-10 17:53:31 发布

追上明天的脚步

最新推荐文章于 2024-07-10 17:53:31 发布

阅读量280

点赞数

分类专栏： vue-cli 项目插件文章标签： swiper vue vue-cli

本文链接：https://blog.csdn.net/wyb15594982127/article/details/88908784

版权

vue-cli 项目同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

插件

2 篇文章 0 订阅

订阅专栏

项目中难免遇到要轮播要滑动的，自己写一个又太慢，复用性也是问题，我就教你 5 分钟搞定swiper，妈妈再也不用担心我的轮播图了，下文代码直接复制即可运行，注释里面写的清清楚楚（最常用到的）；

若是在vue中用的话

npm install swiper --save-dev

在要用到swiper的组件中 import 一下，将js初始化部分写入 vue mounted 钩子函数里即可

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    <style>
        *{
        	margin: 0;
        	padding: 0;
        }
    	.swiper-container {
    		width: 600px;
    		height: 300px;
		} 
		.swiper-slide img{
			width: 100%;
			height: 100%;
		}
    </style>
</head>
<body>
    <div class="swiper-container">
    	<div class="swiper-wrapper">
        	<div class="swiper-slide">
        		<a href="www.baidu.com">
        			<img src="https://cdn-cnc.test.17zuoye.net/s17/xue/student/public/images/wechat/newDetail/appointment_success.png"alt="">
        		</a>
        	</div>
        	<div class="swiper-slide">
        		<a href="www.baidu.com">
        			<img src="http://static.17xueba.com/test/server/image/2018/08/20180827110106378711.png" alt="">
        		</a>
        	</div>
        	<div class="swiper-slide">
        		<a href="www.baidu.com">
        			<img src="http://oimageb1.youdao.com/image?id=5410126604320844202&product=picugc" alt="">
        		</a>
        	</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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
    <script>
   		var mySwiper = new Swiper ('.swiper-container', {
   			// 如果需要分页器
    		pagination: {
      			el: '.swiper-pagination',
      			dynamicBullets: true, //动态分页器
      			clickable: true, //分页器控制滑动
    		},
    
    		// 如果需要前进后退按钮
    		/*navigation: {
      			nextEl: '.swiper-button-next',
      			prevEl: '.swiper-button-prev',
    		},*/
    
    		// 如果需要滚动条
    		/*scrollbar: {
      			el: '.swiper-scrollbar',
    		},*/


        	effect : 'slide',//位移切换 fade-淡入 cube-立体方块 coverflow-3D流 flip-3D翻转
   			// autoplay: true,//可选选项，自动滑动
   			autoplay : {
     			delay:1000 // 滑动块 slide 停留时间
  			},
  			speed : 1000, // 自动滑动速度
  			//grabCursor : true, // 鼠标到 slide 上变手掌
    		direction: 'horizontal', // 水平   vertical //垂直
   			loop: true, // 循环模式选项
   			initialSlide :0, //默认初始化显示slide块
   			//autoHeight : true, //高度随 slide 变化
   			//runCallbacksOnInit : false,//初始化时不触发slideChange
   			on:{
    			slideChangeTransitionEnd:function(){
      				//console.log('滑动完成触发回调' + this.realIndex);
    			},
    			sliderMove: function(){
    				//console.log('人为滑动');	
    			},
 			},
 			//init: false, //false 禁止初始化，在需要的地方使用 mySwiper.init() 来初始化
  		}) 
    </script>
</body>
</html>