swiper 中文网地址:http://www.swiper.com.cn/
1. 下载 swiper
npm install --save swiper
2. 在需要用到swiper插件的组件中引入swiper 和 css
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
这个 css 引入路径具体看 node_modules 文件夹下 swiper 文件夹下css的路径。
3. html 和 css 代码
<template>
<section class="msite">
<!--首页导航-->
<nav class="msite_nav">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/1.jpg">
</div>
<span>甜品饮品</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/2.jpg">
</div>
<span>商超便利</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/3.jpg">
</div>
<span>美食</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/4.jpg">
</div>
<span>简餐</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/5.jpg">
</div>
<span>新店特惠</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/6.jpg">
</div>
<span>准时达</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/7.jpg">
</div>
<span>预订早餐</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/8.jpg">
</div>
<span>土豪推荐</span>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/9.jpg">
</div>
<span>甜品饮品</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/10.jpg">
</div>
<span>商超便利</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/11.jpg">
</div>
<span>美食</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/12.jpg">
</div>
<span>简餐</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/13.jpg">
</div>
<span>新店特惠</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/14.jpg">
</div>
<span>准时达</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/1.jpg">
</div>
<span>预订早餐</span>
</a>
<a href="javascript:" class="link_to_food">
<div class="food_container">
<img src="./images/nav/2.jpg">
</div>
<span>土豪推荐</span>
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</nav>
</section>
</template>
这里依旧是跟着视频用的 stylus
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixins.styl"
.msite //首页
width 100%
.msite_nav
bottom-border-1px(#e4e4e4)
margin-top 45px
height 200px
background #fff
.swiper-container
width 100%
height 100%
.swiper-wrapper
width 100%
height 100%
.swiper-slide
display flex
justify-content center
align-items flex-start
flex-wrap wrap
.link_to_food
width 25%
.food_container
display block
width 100%
text-align center
padding-bottom 10px
font-size 0
img
display inline-block
width 50px
height 50px
span
display block
width 100%
text-align center
font-size 13px
color #666
.swiper-pagination
>span.swiper-pagination-bullet-active
background #02a774
</style>
4. 创建一个 swiper 实例对象,来实现轮播
export default {
mounted () {
//创建一个 swiper 实例对象,来实现轮播
new Swiper('.swiper-container', {
//如果需要分页器
pagination: {
el: '.swiper-pagination',
},
//可以循环轮播
loop: true
})
}
}
运行结果:
5. 补充 swiper 的使用方法
来自 swiper 中文网地址 Swiper 使用方法