Vue中使用swiper构建简易轮播图

<!--swiper插件配置-->
<template><div class="view-pager"><swiper:modules="modules"<!--循环播放-->:loop="true"        <!--底部圆圈-->:pagination = "{     clickable: true,}"<!--滚动栏-->:Scrollbar = "{        draggable: true,el: '.swiper-scrollbar',hide: false,}":autoplay ="{ delay: 3000, disableOnInteraction: false }":space-between="20":navigation="{ <!--按钮-->nextEl: 'swiper-button-next',prevEl: 'swiper-button-prev',disabledClass: 'my-button-disabled'}"@swiper = "onSwiper"@slideChange="onSlideChange"><swiper-slide v-for="item in cbanners" :key="item"><a :href="item.link"><img :src="item.image" alt="" style="width: 100%;"></a></swiper-slide></swiper></div>
</template>

创建 swiper 轮播区域，其他选项访问swiper官方网站

<script>// 这里就是更新后的路径，以前是import { Swiper, SwiperSlide } from 'swiper/vue'import { Swiper, SwiperSlide } from 'swiper/vue'import { Pagination, A11y, Autoplay, Scrollbar, Navigation } from 'swiper'// 更新后的路径，以前是import 'swiper/css，这里使用别名，可查看路径node_modules/swiper/package.json'import 'swiper/css'import 'swiper/css/pagination'import 'swiper/css/navigation'import 'swiper/css/scrollbar'export default {name: 'ViewPager',components: {Swiper,SwiperSlide},props: ['cbanners'],    //轮播图数据setup () {const onSwiper = (swiper) => {console.log(swiper)}const onSlideChange = () => {console.log('slide change')}return {// swiper组件modules: [Pagination, A11y, Autoplay, Scrollbar, Navigation],onSwiper,onSlideChange}}}
</script>

Swiper使用的插件需要先在script 标签内的 moudles 里面注册，然后在标签里面才能正常使用
更多参数访问 swiper 官方网站

Vue中使用swiper构建简易轮播图相关推荐

Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
在html中使用swiper插件实现轮播图效果
最近在对公司官网改版2.0,之前的没有后台都是静态页面那么官网逃不开的肯定是轮播图啦~ 当然我一开始是自己写的,发现写到一半很麻烦,首先从最后一张像环路一样到第一张:其次不仅是点击,还要触摸滑动,这 ...
Vue安装使用Swiper，做轮播图
swiper所有版本中swiper4的兼容性是最好的,组件在 swiper4之后没有很大改变,使用时最好选择swiper4. 1.安装 npm install swiper@4.5.1 --save- ...
在微信小程序中，swiper组件（轮播图4）的常用属性
swiper组件的常用属性属性类型默认值说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
使用js做简易轮播图，可自动
[作者注]:第一次使用js做简易轮播图首先在body里div个容器 div class="box"> <p id="p" ></p&g ...
基于swiper实现旋转木马轮播图（适配移动端）
效果如下: 注:这里引用的是swiper3.0,swiper3.0无需加载公用库:Swiper无需加载任何公共库(如jquery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加 ...
【Vue项目笔记心得】Swiper插件用于轮播图
1.下载一个版本的swiper,这里以5.4.5为例, 在项目开发过程中需要安装swiper插件 npm install swiper@5 官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面 ...
在vue脚手架中，学习实现一个轮播图（2-旋转木马）
目录效果展示: index.html: template: data: methods: mounted(): style: 效果展示: 轮播图(旋转木马) index.html: <styl ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...

Vue中使用swiper构建简易轮播图

Vue中使用swiper构建简易轮播图相关推荐

最新文章

热门文章