Vue使用Swiper轮播

最新推荐文章于 2024-07-02 17:23:39 发布

慢半拍、

最新推荐文章于 2024-07-02 17:23:39 发布

阅读量873

点赞数 2

分类专栏： vue 文章标签： vue swiper css

本文链接：https://blog.csdn.net/huanhuan03/article/details/105394332

版权

vue 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

swiper官网：https://www.swiper.com.cn/
vue中使用Swiper：https://github.com/surmon-china/vue-awesome-swiper
swiper各种示例：https://www.swiper.com.cn/demo/index.html

最近在写官网，有很多类型的轮播展示，于是就用到了swiper，毕竟强大啊，话不多说show code ：

下载

npm install swiper vue-awesome-swiper --save

引入

在main.js全局引入如下，因为我的项目大量使用各种轮播，当然你用得少也可以在组件内引入，参考官网github中的示例

// main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

使用

// html
<div v-swiper:mySwiper1="swiperOption1">
   <div class="swiper-wrapper">
    <div class="swiper-slide" :key="index" v-for="(item, index) in banners">
        <img :src="item.bannerImg">
    </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

// js
data () {
	return {
			swiperOption1: {      //  这是swiper各种属性设置，详细看官网API，这里简单示例
			    pagination: {
			        el: '.swiper-pagination'
			    },
			    autoplay:true,//等同于以下设置
			},
			banners: [ ],    //  通过接口获取即可
	}
}

// css  下面这是我自己的需求样式，不是必须和固定的    // .swiper-container的宽度是跟着父级走的
.swiper-container{
	  height: 600px;
	   .swiper-pagination{
	       background: rgba(255,255,255,.7);
	       border-radius: 10px;
	       width: 9%;
	       left: 50%;
	       transform: translateX(-50%);
	       bottom: 120px;
	   }
	   img{
	       width: 100%;
	       height: 100%;
	   }
}

至此就可以展示一个轮播图啦，如果你想要其他样式，可以先在官网的各种示例选择好，后面有一个数字的，然后可以在这里下载你想要的版本压缩包，解压完了打开demos文件夹，里面就是全部示例，找到你想要的对应数字的页面，就直接从这个示例复制他的配置项即可，有些样式也要自己修改一下。

是不是很简单，如果你一个页面有多个轮播，记得修改轮播组件的v-swiper的属性名和属性值的名。