vue-awesome-swiper做滑动效果


1.swiper官网

https://www.swiper.com.cn/

里面的在vue里面使用swiper 进入 https://github.com/surmon-china/vue-awesome-swiper

然后  npm install vue-awesome-swiper --save  下载到依赖包

引用(这里是按需引用) 然后定义一下 一页出现几个 

<script>
	// 引入vue-awesome-swiper
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		data(){
			return{
				swiperOption: {
					// 一页出现几个
				          slidesPerView:3,
				        }
			}
		},
	  components: {
	    swiper,
	    swiperSlide  
	  }  
	}
</script>

 模板里

<swiper class='hot-swiper' :options="swiperOption">
		<swiper-slide >
			<div class="hot-swiper-content">
				<img src="./img/1.jpg"  style="width:100px;"> 
				  <div>图片1</div>
				  <div>10</div>
			</div>
		</swiper-slide> 
<swiper>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM