swiper、vue-awsome-swiper插件使用

效果图展示：

一、安装

swiper5 稳定版本5.4.5

npm install swiper@5.4.5 vue-awesome-swiper@4.1.1

swiper各版本区别地址：https://www.swiper.com.cn/about/us/index.html

二、vue-awsome-swiper引用方式

按照组件形式局部导入：

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'export default {name: 'WorkShop',components: {Swiper,SwiperSlide,},data() {return {swiperOption: {direction: 'vertical', // Swiper的滑动方向,设置为垂直滑动loop: true,  // 循环模式选项initialSlide: 0, // 初始化时slide的索引，为第一页autoplay: {delay: 2500,  // 自动轮播间隔时间，单位msstopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。disableOnInteraction: false,  // 点击或者滑动切换后仍然会自动轮播},speed: 1000,  //轮播一次的速度，单位ms// 如果需要分页器pagination: {el: '.swiper-pagination',  // 分页器属性名clickable: true,  // 设置后可点击对应圆点跳转对应轮播},},}},
}
</script>

或者全局导入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)

三、完整代码案例

<template><div class="main"><swiper class="swiper" :options="swiperOption"><swiper-slide><div class="work"><img class="work-img" src="@/assets/bg/work-shop.png" alt="" /><div class="work-title">11111111111</div></div></swiper-slide><swiper-slide><div class="work"><img class="work-img" src="@/assets/bg/work-shop.png" alt="" /><div class="work-title">22222222222</div></div></swiper-slide><swiper-slide><div class="work"><img class="work-img" src="@/assets/bg/work-shop.png" alt="" /><div class="work-title">33333333333</div></div></swiper-slide><swiper-slide><div class="work"><img class="work-img" src="@/assets/bg/work-shop.png" alt="" /><div class="work-title">4444444444444</div></div></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'export default {name: 'WorkShop',components: {Swiper,SwiperSlide,},data() {return {swiperOption: {direction: 'vertical', // Swiper的滑动方向,设置为垂直滑动loop: true,  // 循环模式选项initialSlide: 0, // 初始化时slide的索引，为第一页autoplay: {delay: 2500,  // 自动轮播间隔时间，单位msstopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。disableOnInteraction: false,  // 点击或者滑动切换后仍然会自动轮播},speed: 1000,  //轮播一次的速度，单位ms// 如果需要分页器pagination: {el: '.swiper-pagination',  // 分页器属性名clickable: true,  // 设置后可点击对应圆点跳转对应轮播},},}},
}
</script><style scoped lang="less">
.main {display: flex;justify-content: center;padding-top: 22px;.swiper {height: 240px;width: 457px;position: absolute;border-radius: 8px;.swiper-slide {display: flex;justify-content: center;align-items: center;text-align: center;font-weight: bold;}}
}
/deep/.swiper-pagination-bullet {background: #ffffff;border-radius: 50%;
}
/deep/.swiper-pagination-bullet-active {background: white;
}
/deep/.swiper-pagination {top: 40%;right: 15px;
}
.work {width: 100%;height: 100%;position: relative;.work-img {height: 100%;width: 100%;position: absolute;top: 0;left: 0;opacity: 0.4;}.work-title {top: 48%;position: absolute;width: 426px;height: 50px;color: #d0ecff;font-size: 12px;text-align: left;line-height: 18px;margin: 28px 0 0 16px;opacity: 0.7;}
}
.work-title:before {content: '\00A0\00A0\00A0\00A0\00A0\00A0';
}
</style>

swiper、vue-awsome-swiper插件使用相关推荐

vue 使用swiper详细步骤
首先请参考下边这个连接,安装正确的swiper 特别说明一定是vue3,vue2使用是会报错的 vue3 中使用 swiper_@swiper_jjw_zyfx的博客-CSDN博客其次: <t ...
vue 结合swiper插件实现广告公告上下滚动的效果
最近做到的项目里面需要广告公告上下滚动,网上也找了很多例子,效果总是不理想,所以就想着利用轮播图的竖直方向的滚动来实现这个效果一.在项目里面安装swiper插件通过npm安装: npm insta ...
vue使用swiper插件
昨天搞这个插件,搞得我很生气! 我只是要个最简单的移动端轮播图,整的我心态本类能够自动播放,循环就行.. 但是找了一圈,一直报错还有就是,我获取图片是通过接口的,所以用到了v-for循环就会出现 ...
swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
Vue使用Swiper看这一篇就够了
Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时的事件丢失问题 swiper鼠标移入/移出暂停/开 ...
一个页面两个或多个swiper vue中一个页面多个swiper互相干扰 swiper轮播冲突
在vue中如何处理同一个页面中有多个swiper,首先我们需要分2中情况: 1.如果在vue中采用 Vue-Awesome-Swiper,如果采用这种方式的话,可以给每个swiper组件添加一个cla ...
Vue实现swiper轮播
https://www.npmjs.com/package/vue-awesome-swiper 以上是npm安装swiper插件的网址找 NPM 下的 npm install vue-awesom ...
swiper + vue 中间大两边小轮播图
展示效果代码字体16px 框架vuetify <template><v-main><div class="body_height ofs"> ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...

swiper、vue-awsome-swiper插件使用

一、安装

二、vue-awsome-swiper引用方式

三、完整代码案例

swiper、vue-awsome-swiper插件使用相关推荐

最新文章

热门文章