Vue3使用Swiper

vue版本：

C:\Users\boxin>vue -V
@vue/cli 5.0.4

Swiper版本：

"swiper": "^6.5.6",

1.安装Swiper，指定版本

npm install swiper@6.5.6 --save

Swiper部分独立成子组件，新建swiperCom.vue下
2.引入swiper组件

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

3.引入样式文件

// Import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";

4.从qq音乐等软件保存数张轮播图片至本地，设置图片数组

    data: function () {return {imgs: [require("../assets/img/swiper1.jpg"),require("../assets/img/swiper2.jpg"),require("../assets/img/swiper3.jpg"),require("../assets/img/swiper4.jpg"),],};},

5.JS:

export default {name: "swiperCom",data: function () {return {imgs: [require("../assets/img/swiper1.jpg"),require("../assets/img/swiper2.jpg"),require("../assets/img/swiper3.jpg"),require("../assets/img/swiper4.jpg"),],};},components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper) => {console.log(swiper);};const onSlideChange = () => {console.log('slide change');};return {onSwiper,onSlideChange,};},};

6.template模板：

<swiper class="swiper-container"><swiper-slide class="swiper-slide" v-for="(item, i) in imgs" :key="i"><img :src="item" alt=""/></swiper-slide><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。--><!-- <div class="swiper-button-prev"></div><div class="swiper-button-next"></div> --><!-- 如果需要滚动条 --><!-- <div class="swiper-scrollbar"></div> -->
</swiper>

7.为正常显示自动滚动、循环、分页等轮播功能，引入Swiper模块并使用

// Import Swiper core and required modules
import SwiperCore, {Navigation,Pagination,Scrollbar,A11y,Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

8.相关模块通过setup()返回使用：

return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],
};

9.template配置参数

<swiperclass="swiper-container":navigation="{nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',}":pagination="{ clickable: true }":autoplay="{ autoplay: true }"loop>

10.相关样式调整：

.swiper-container {width: 7.1rem;height: 3rem;border-radius: 0.1rem;--swiper-theme-color: #ff6600;--swiper-pagination-color: #248cc0;--swiper-navigation-color: #248cc0;--swiper-navigation-size: 20px;
}
.swiper-slide img{width: 100%;
}

11.引入主组件，npm run serve启动后轮播图效果：

Vue3使用Swiper相关推荐

vue3使用swiper+animate.css动效
场景:现在好多推广翻页的h5都会添加一些动效,大部分结合的是animate.css这个效果,参考把夏日回忆藏进自然笔记 animate.css动效是比较多样化并且很容易上手的css模板那么swi ...
vue3 seo prerender-spa-plugin swiper6 vue-router4 build 打包空白图片压缩
版本依赖 vue3.vue-cli4. vue-router4.swiper6.prerender-spa-plugin3.image-webpack-loader7 "dependenci ...
vue2、vue3中使用swiper
两个项目中需要使用轮播图,恰好一个是vue2的,一个是vue3的,使用swiper过程中踩了很多的坑,总结一下. 一.vue3中使用swiper vue3中使用swiper,对应版本为7-8,整个过程 ...
Vue2 or Vue3 or TS 使用最新版本 swiper/vue-awesome-swiper
原文链接: https://www.jianshu.com/p/51fa180e6fd6 vue3+ts+swiper6实际验证可行. 安装swiper6: yarn add swiper 在vue3 ...
vue3中使用swiper完整版教程
介绍在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式使用命令 np ...
vue3中使用swiper.js实现轮播功能
vue3中使用swiper6实现轮播 vue用的3.0版本,swiper用的swiper6 安装Swiper // "swiper": "^6.7.5",npm ...
vue3中使用 swiper 插件，自定义切换按钮，将前进后退、左右切换按钮放到容器外部
今天在使用 swiper 时,遇到一个坑爹的问题. swiper 组件的本来样式长这样: 左右切换的按钮在滑动容器内部,但是我们想要它跑到容器外面去. 网上找了一堆方法都不好使也不知道是不是因为 ...
swiper+vue3 水平带左右箭头切换
先展示效果: 视图层: <swiper:autoplay="swiper_options.autoplay":loop="swiper_options.loop&q ...
uniapp中实现swiper高度自适应 - vue3
1. 使用 uni.createSelectorQuery() 获取节点信息 2. 使用 uni.getSystemInfo() 获取当前可使用窗口高度 3. 使用 v-bind 动态修改 swipe ...

Vue3使用Swiper

vue版本：

Swiper版本：

Vue3使用Swiper相关推荐

最新文章

热门文章