vue中 swiper

水深无声 2022-09-09 09:24 150阅读 0赞

安装：

> npm install vue-awesome-swiper@3 --save-dev

main.js

> import VueAwesomeSwiper from ‘vue-awesome-swiper’  
> Vue.use(VueAwesomeSwiper)

**页面 *多个swiper***

<swiper ref="mySwiper" :options="swiperOptionsone" v-if='banner_list.length>0'>	
    						<swiper-slide v-for="(item,index) in banner_list" :key="item.id" >
    							<img :src="item.url" @click="push_more(item.id)">
    						</swiper-slide>
    </swiper>
    
    <swiper ref="mySwipertow" :options="swiperOptions" v-if='ptho.length>0'>
    						<swiper-slide v-for="(item,index) in ptho" :key="item.id" >
    							<img :src="item">
    						</swiper-slide>
    </swiper>

**页面引入**

import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";

**页面注册**

components:{
    	swiper,
    	swiperSlide,
    }

**配置项:**

swiperOptionsone: {
    					loop: true,
    					 autoplay: {
    					  delay:3000,
    					  stopOnLastSlide: true,
    					  disableOnInteraction: true
    					},
    					// 设置点击箭头
    							navigation: {
    							  nextEl: ".swiper-button-next1",
    							  prevEl: ".swiper-button-prev1"
    						}
    				  },
    swiperOptions: {
    				  	 loop: true,
    				  	 autoplay: {
    				  	  delay:3000,
    				  	  stopOnLastSlide: true,
    				  	  disableOnInteraction: true
    				  	},
    				  	// 设置点击箭头
    				  			navigation: {
    				  			  nextEl: ".swiper-button-next2",
    				  			  prevEl: ".swiper-button-prev2"
    				  		}
      },

发表评论取消回复

表情：

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

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

相关阅读

相关 * swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.js

前言项目安装swiper轮播后，启动报错： -------------------- 错误信息如下： D:\code\zcw-vue-shop\zcw

你的名字/ 2022年12月28日 08:26/ 0 赞/ 185 阅读

相关 vue使用swiper

文章引用[vue使用swiper][vue_swiper] 这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，不需

待我称王封你为后i/ 2022年11月04日 01:36/ 0 赞/ 196 阅读

相关解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题

0 文章太长懒得看将语句：`import 'swiper/css/swiper.css'` 修改为：`import 'swiper/swiper-bundle.cs

痛定思痛。/ 2022年10月30日 12:26/ 0 赞/ 521 阅读

相关若依引入swiper / VUE引入swiper

现有需求要求实现竖直方向的同时显示3个item的轮播效果，若依VUE（前后端分离）版本使用的是Element UI，框架中的`carousel`组件只能实现简单的轮播效果，并且

妖狐艹你老母/ 2022年10月07日 08:56/ 0 赞/ 352 阅读

相关 vue中 swiper

安装： > npm install vue-awesome-swiper@3 --save-dev main.js > import VueAwesomeSwiper f

水深无声/ 2022年09月09日 09:24/ 0 赞/ 151 阅读

相关 Vue 中使用vue-awesome-swiper

官方在线demo：[https://github.surmon.me/vue-awesome-swiper/][https_github.surmon.me_vue-aweso

﹏ヽ暗。殇╰゛Y/ 2022年09月04日 04:46/ 0 赞/ 519 阅读

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

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

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

相关 Swiper、vue-awesome-swiper中文文档

[中文文档][Link 1] 找了好久才找到，适用于vue-awesome-swiper滑动组件 swiperOption: { heig

悠悠/ 2022年05月14日 02:56/ 0 赞/ 4664 阅读

相关 vue-awesome-swiper 手记

一、获取到swiper对象使用方法的问题因为在vue上使用swiper是以引入组件的方式直接使用所以要获取到swiper对象才能够去调用它的一些方法，，，，比如sl

偏执的太偏执、/ 2022年03月29日 09:54/ 0 赞/ 257 阅读

相关 vue项目中使用swiper框架

第一步：安装swiper 在项目目录下打开命令窗口输入命令:npm install swiper 第二步：引入js文件 ![在这里插入图片描述][watermark_

超、凢脫俗/ 2022年02月13日 09:49/ 0 赞/ 227 阅读