vue中使用轮播图 Vue-Awesome-Swiper

我不是女神ヾ 2022-05-25 01:08 244阅读 0赞

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，

这个就是swiper，不过弄了一个适合vue的东西;

官方这样描述：

基于 [Swiper4][]、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 [v2.6.7][] 版本。

如何使用呢？

第一步肯定要下载啊：

npm install vue-awesome-swiper --save

下载完之后这样引用一下：

< script>

import "swiper/dist/css/swiper.css";

import \{ swiper, swiperSlide \} from "vue-awesome-swiper";

export default \{

name: "Carousel",

\}

</ script>

引用完之后就可以用了

< script>

import "swiper/dist/css/swiper.css";

import \{ swiper, swiperSlide \} from "vue-awesome-swiper";

import carousel1 from "../assets/img/carousel1.jpg";

import carousel2 from "../assets/img/carousel2.jpg";

import carousel3 from "../assets/img/carousel3.jpg";

import carousel4 from "../assets/img/carousel4.jpg";

import carousel5 from "../assets/img/carousel5.jpg";

import carousel6 from "../assets/img/carousel6.jpg";

export default \{

name: "Carousel",

data() \{

return \{

slides:\[carousel1,carousel2,carousel3,carousel4,carousel5,carousel6\],

swiperOption: \{

//可选选项，自动滑动

autoplay: true,

// 循环滚动

loop : true,

//轮播图分页

pagination: \{

el: '.swiper-pagination',

clickable: true,

\},

\}

\};

\},

computed: \{

swiper() \{

return this.$refs.mySwiper.swiper;

\}

\},

mounted() \{

// current swiper instance

// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

*console*. log( "this is current swiper instance object", this.swiper);

// this.swiper.slideTo(4, 4000, false);

\},

components: \{

swiper,

swiperSlide

\}

\};

</ script>

主要参数都在data 里面的 swiperOption 中设置，和以前使用swiper一样，没什么差别，

主要区别是在下面的处理上；

上面的加上图片就已经可以简单使用了；

官方说明：https://www.npmjs.com/package/vue-awesome-swiper

[Swiper4]: http://www.swiper.com.cn/
[v2.6.7]: https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue轮播图（swiper）

Vue轮播图（swiper）注意：swiper版本为5.x.x时，import才能引入成功 1. 在terminal中输入,引入swiper依赖 --

骑猪看日落/ 2023年03月04日 06:46/ 0 赞/ 11 阅读

相关 vue走马灯/轮播图

<div class="banner"> <el-carousel height="460px" :interval="5000" arrow="a

Dear 丶/ 2022年11月18日 05:49/ 0 赞/ 285 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 247 阅读

相关 Vue中使用swiper插件实现轮播图

最终效果如图: ![20210623143509101.gif][] 为了更稳定不建议使用最新版本swiper 下载指定版本如下图: 用到vue-aweso

爱被打了一巴掌/ 2022年10月09日 02:56/ 0 赞/ 254 阅读

相关 vue中使用轮播图 Vue-Awesome-Swiper

既然vue是基于组件进行开发的，那么适合组件的轮播图就用vue-awesome-swiper 吧，这个就是swiper，不过弄了一个适合vue的东西; 官方这样

我不是女神ヾ/ 2022年05月25日 01:08/ 0 赞/ 245 阅读

相关 vue使用swiper实现轮播图代码

<div v-swiper:mySwiper="swiperOption"> <div class="swiper-wrapper">

悠悠/ 2022年04月12日 11:46/ 0 赞/ 269 阅读

相关 vue中轮播图的使用

下载： npm install swiper --save-dev 网址： swiper4.0使用入口：http://www.swiper.com.cn/usag

Love The Way You Lie/ 2022年02月12日 10:22/ 0 赞/ 227 阅读

相关 VUE中实现MUI轮播图效果

1、配置`App.vue`文件，通过`<router-view></router-view>`加载轮播图页面 <template> <div class=

我不是女神ヾ/ 2022年02月03日 06:59/ 0 赞/ 349 阅读

相关 vue weex 轮播图

<template> <div>  <slider class="slider" i

朴灿烈づ我的快乐病毒、/ 2021年09月17日 22:20/ 0 赞/ 393 阅读

相关 Vue-Vant实现轮播图

参考文档：[Vant][] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

我会带着你远行/ 2021年09月09日 02:02/ 0 赞/ 1598 阅读