今天在nuxt项目中使用swiper,无法显示分页,而且在swiper-pagination类标签里面空空如也
安装命令:
npm install swiper vue-awesome-swiper --save
# or
yarn add swiper vue-awesome-swiper
当时安装的版本如下:
"swiper": "^6.4.1",
"vue-awesome-swiper": "^4.1.1"
代码如下:
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide :key="1">
<img src="../assets/img/pic-banner.jpg" alt="">
</swiper-slide>
<swiper-slide :key="2">
<img src="../assets/img/pic-banner.jpg" alt="">
</swiper-slide>
<div slot="pagination" class="swiper-pagination" />
</swiper>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
name: 'Index',
components: {
Swiper,
SwiperSlide
},
data () {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
loop: true,
autoplay: { delay: 4000 }
}
}
}
}
</script>
后来发现是swiper的版本太高了引起的,修改package.json降低版本即可
"swiper": "5.3.7",
"vue-awesome-swiper": "4.1.1"
这时导入CSS的方式也要改下 import ‘swiper/css/swiper.css’
来个完整的
<div class="index">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide :key="1">
<img src="../assets/img/pic-banner.jpg" alt="">
</swiper-slide>
<swiper-slide :key="2">
<img src="../assets/img/pic-banner.jpg" alt="">
</swiper-slide>
<div slot="pagination" class="swiper-pagination" />
<div slot="button-next" class="swiper-button-next" />
<div slot="button-prev" class="swiper-button-prev" />
</swiper>
</div>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'Index',
// async asyncData ({ params, $axios }) {
// const { data } = await $axios.get(`https://my-api/posts/${params.id}`)
// return { title: data.title }
// },
components: {
Swiper,
SwiperSlide
},
data () {
return {
title: '首页',
swiperOptions: {
pagination: {
el: '.swiper-pagination',
// 分页可以点击
clickable: true,
// 激活的分页小圆点样式
bulletActiveClass: 'swiper-bullet-active'
},
loop: true,
autoplay: { delay: 4000 },
// 左右导航
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {
swiper () {
return this.$refs.mySwiper.$swiper
}
},
mounted () {
// 悬浮时显示导航菜单
this.swiper.el.onmouseover = function () {
this.swiper.navigation.$nextEl.css('display', 'block')
this.swiper.navigation.$prevEl.css('display', 'block')
}
this.swiper.el.onmouseleave = function () {
this.swiper.navigation.$nextEl.css('display', 'none')
this.swiper.navigation.$prevEl.css('display', 'none')
}
},
head () {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: 'My custom description'
}
]
}
}
}
</script>
<style lang="less">
@theme-color: #c91c1c;
.swiper-button-prev,.swiper-button-next{
display: none;
}
.swiper-pagination-bullet.swiper-bullet-active{
background: @theme-color;
opacity: 1;
}
.swiper-container{
--swiper-navigation-color: @theme-color;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
</style>