在使用vue-awesome-swiper制作轮播图时候，按照文档局部引入，使用下方代码

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'export default {components: {Swiper,SwiperSlide},directives: {swiper: directive}
}

运行下方代码时候，轮播分页器无法显示出来

<template><swiper id="swiper" ref="mySwiper" :options="swiperOptions"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper>
</template><script>
// 1. 引入swiper样式及组件
import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {name: "Sowing",components: {Swiper,SwiperSlide},data() {return {swiperOptions: {notNextTick: true,  // 必须// 配置分页pagination: {el: '.swiper-pagination',clickable: true,},}}}
}
</script><style scoped>
#swiper {height: 200px;width: 100%;background-color: red;
}</style>

解决方案

添加一下两行代码，即可正常显示：

import Swiper2, {Navigation, Pagination} from 'swiper';Swiper2.use([Navigation, Pagination]);

vue-awesome-swiper：依赖于6.X版本Swiper时轮播分页器下方小圆点不显示相关推荐

swiper轮播图 swiper-pagination 小圆点不显示，以及切换图片无效的问题
@[页面会报错]Property or method "swiperOption" is not defined on the instance but referenced du ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
swiper 定义放多少张图片_swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分...
其二:项目遇到比较有点要求的轮播图,默认显示3张图片,中间显示全部,两边显示部分.如图: 网上找了也没有找到合适的,最后经过自己摸索写了出来,贴出代码分享给大家. CSS .swiper-contai ...
Vue 实现商品详情多播图(点击图片列表轮播图)
Vue 实现商品详情多播图(点击轮播图) 之前弄商城项目有要到这种效果的商品展示图(商品图片轮播),找了很久没找到,就自己写了一个. 实现效果: 点击左右按钮图片左右移动点击小图片图片展示到大图图 ...
层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求在网上找了一堆都没有自己想要的最开始被 TaroUI和小程序自带的swiper困扰一直以为是swpier的升级版试了好久也没改造成功干脆自 ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
swiper修改轮播图下面小圆圈样式
具体样式 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width: .18 ...
vue使用设置背景图片的方式实现淡入淡出轮播图2
首先放一份,我调试完美运行的代码: <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...
swiper实现类似虎牙斗鱼直播平台竖向轮播图样式
先上最终效果图直接上代码 <div class="bg_banner"><div class="bg_banner_player">& ...
用vue写轮子的一些心得（五）——Slides轮播组件
需求分析 Slides组件通常包括一下功能: 可支持自动播放可设置自动播放时间轮播图片高宽可自适应支持触屏滑动轮播可无缝轮播方法实现 1.定义组件: 在html中定义 t-slides组件定 ...

vue-awesome-swiper：依赖于6.X版本Swiper时轮播分页器下方小圆点不显示

在使用vue-awesome-swiper制作轮播图时候，按照文档局部引入，使用下方代码

运行下方代码时候，轮播分页器无法显示出来

解决方案

vue-awesome-swiper：依赖于6.X版本Swiper时轮播分页器下方小圆点不显示相关推荐

最新文章

热门文章