vue2中使用vue-awesome-swiper实现轮播

swiper官方文档:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

1.安装

注意:swiper和vue-awesome-swiper的版本一定一定一定要相对应,版本对应如下:

Swiper 5-6 vue-awesome-swiper@4.1.1(vue2)

Swiper 4.x vue-awesome-swiper@3.1.3(vue2)

Swiper 3.x vue-awesome-swiper@2.6.7(vue2)

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

npm install swiper@5.2.0 vue-awesome-swiper@4.1.1 --save

检查package.jsonswipervue-awesome-swiper是否安装成功

 或 

2.引入

方法一:在main.js中全局引入
// swiper@4.5.1 vue-awesome-swiper@3.1.3
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)// swiper@5.2.0 vue-awesome-swiper@4.1.1
import VueAwesomeSwiper from 'vue-awesome-swiper'
import swipercss from 'swiper/css/swiper.min.css'
Vue.use(VueAwesomeSwiper, {swipercss
}) // 注册
方法二:局部引入

注意:局部引入,引入模块根据版本区分大小写:

vue-awesome-swiper@3.x 版本的 ---- 引入模块时使用小写:

import { swiper, swiperSlide } from “vue-awesome-swiper”;

vue-awesome-swiper@4.x 版本的 ---- 引入模块时使用大写:

import { Swiper, SwiperSlide } from “vue-awesome-swiper”;

// swiper@4.5.1 vue-awesome-swiper@3.1.3
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {//import引入的组件需要注入到对象中才能使用components: {swiper,swiperSlide,},
}// swiper@5.2.0 vue-awesome-swiper@4.1.1
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
export default {//import引入的组件需要注入到对象中才能使用components: {Swiper,SwiperSlide},
}

3.使用

这里要注意的是引入的版本对应,否则会报错,两个版本我都试过了是ok的

<template><div class="main-body module-contain"><div class="board-contain"><div class="lm-container-right-block"@mouseenter="on_bot_enter"@mouseleave="on_bot_leave"><swiper :options="swiperOption"ref="mySwiper"><swiper-slide v-for="i in list":key="i">{{ i }}</swiper-slide><!-- 标记页数 --><!-- <div class="swiper-pagination"slot="pagination"></div> --><!-- 左右箭头 --><!-- <div class="swiper-button-prev swiper-button-black"slot="button-prev"></div><div class="swiper-button-next swiper-button-black"slot="button-next"></div> --></swiper></div></div></div>
</template>
<script>
// 局部引入
// swiper@4.5.1 vue-awesome-swiper@3.1.3
// import { swiper, swiperSlide } from "vue-awesome-swiper"
// import "swiper/dist/css/swiper.css"// swiper@5.2.0 vue-awesome-swiper@4.1.1
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.min.css'
export default {components: {//import引入的组件需要注入到对象中才能使用// swiper@4.5.1 vue-awesome-swiper@3.1.3// swiper,// swiperSlide// swiper@5.2.0 vue-awesome-swiper@4.1.1// Swiper,// SwiperSlide},data () {return {swiperOption: {// 循环播放loop: true,// 循环方向direction: "vertical",// 设置slider容器能够同时显示的slides数量(carousel模式)// slidesPerView: 1,slidesPerView: "auto",// 设定为true时,active slide会居中,而不是默认状态下的居左(false)centeredSlides: true,// 滑动速度// speed: 1500,// 在slide之间设置距离(单位px)spaceBetween: 10,// 设定初始化时slide的索引,Swiper默认初始化时显示第一个slideinitialSlide: 0,// 自动播放autoplay: {// 隔×秒自动滑动一次delay: 2000,stopOnLastSlide: false,// 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为truedisableOnInteraction: false},// loopedSlides: 3,// 标记页数// pagination: {//   el: ".swiper-pagination",//   clickable: true, // 允许分页点击跳转// },// 左右箭头// navigation: {//   prevEl: ".swiper-button-prev",//   nextEl: ".swiper-button-next",// },},list: [1, 2, 3, 4, 5, 6]}},mounted () {},watch: {},methods: {on_bot_enter () {//  swiper@4.5.1 vue-awesome-swiper@3.1.3// this.$refs.mySwiper.swiper.autoplay.stop()// swiper@5.2.0 vue-awesome-swiper@4.1.1this.$refs.mySwiper.$swiper.autoplay.stop()},on_bot_leave () {//  swiper@4.5.1 vue-awesome-swiper@3.1.3// this.$refs.mySwiper.swiper.autoplay.start()// swiper@5.2.0 vue-awesome-swiper@4.1.1this.$refs.mySwiper.$swiper.autoplay.start()},}
}
</script><style lang="less" scoped>
.module-contain {height: 87vh;overflow: hidden;.board-contain {.display-flex {display: flex;justify-content: space-between;}.lm-container-right-block {position: relative;overflow: auto;width: 200px;height: 200px;.swiper-container {width: 100%;height: 100%;position: absolute;top: 0;bottom: 0;}.swiper-slide {height: 60px;background-color: #bcf;}}}
}
</style>

注意设置高度设置.swiper-container.swiper-slide的样式,

swiper-container 为设置整体滚动区域,高度一定要设置

swiper-slide 为设置单个的样式,高度一定要设置

其他的配置可以去官网查找对应的API

参考:

https://www.jianshu.com/p/51e52bfe5bf1

https://blog.csdn.net/weixin_48850734/article/details/128299949

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/4235.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习—神经网络中的层

大多数现代神经网络的基本组成部分是一层神经元&#xff0c;本篇文章中&#xff0c;你将学会如何构造一层神经元&#xff0c;一旦你把它放下&#xff0c;你就能把那些积木&#xff0c;把它们放在一起形成一个大的神经网络。 一层神经元是如何工作的&#xff1f; 下面是我们从…

51单片机教程(四)- 点亮LED灯

1、项目分析 让输入/输出口的P1.0连接一盏LED灯进行点亮。 2、技术准备 1 LED组成 ​ 说明 二极管有 P型 和 N型材料构成&#xff0c;通常是&#xff1a;硅/锗 掺杂其他元素&#xff08;硼、磷等&#xff09; 电子是带负电的&#xff0c;是负电荷的载体&#xff0c;电子流…

青训1_1105_03 最小替换子串长度

.md 文章目录 请添加图片描述一 问题描述测试样例示例 二 思路个人思路(ERROR)思路&#xff08;right&#xff09; !!解题思路 详细答案三、理解1、 理解嵌套循环:也就是连续子串的所有可能性位置-看懂了2、问题又来了&#xff0c;即使确定了能得到不同长度连续子串&#xff0c…

222页PPT集团公司供应链管理SOP计划管理流程规划

S&OP&#xff08;Sales & Operations Planning&#xff09;&#xff0c;即销售与运营计划&#xff0c;也被称为产销协同&#xff0c;是一种综合性的企业管理方法。以下是对S&OP计划管理流程规划的详细内容&#xff1a; 一、S&OP的基本概念与目的 S&OP是一…

第三十五篇:HTTP报文格式,HTTP系列二

HTTP 是超⽂本传输协议&#xff0c;也就是HyperText Transfer Protocol。 前面我们讲到第三章中网络协议的定义&#xff0c;网络协议的定义&#xff1a;网络协议是通信计算机双方必须共同遵从的一组约定。就像两个人要进行交流&#xff0c;如果不制定一套约定&#xff0c;一方…

华夏教育集团《梦回延安》全国巡演河南站纪实

传承红色精神&#xff0c;推动中国式家校共育。日前&#xff0c;由华夏教育集团太阳谷华夏学校携手河南少年先锋学校、世纪先锋学校联合推出的大型红色舞台剧《梦回延安》在河南省人民会堂精彩亮相。 河南是中华文明的发祥地之一&#xff0c;此次《梦回延安》舞台剧首次走出辽宁…

Idea如何推送项目到gitee

第一步&#xff1a;先在你的gitee创建一个仓库 第二步&#xff1a; 点击推送 点击定义远程&#xff0c;将URL换成你仓库的&#xff0c;填好你的用户名和密码 可以看到已经推送到仓库了

Leecode:977. 有序数组的平方

题目 ——Leecode:977. 有序数组的平方 目录 题目 ——Leecode:977. 有序数组的平方 题目分析 暴力解法&#xff1a; 双指针解法&#xff1a; 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排…

动态规划-两个数组的dp问题——44.通配符匹配

1.题目解析 题目来源&#xff1a;44.通配符匹配——力扣 测试用例 2.算法原理 1.状态表示 本题属于两个数组的dp问题&#xff0c;这里需要使用p中的字符消去s中的字符且p中有特殊字符可以匹配s中的普通字符&#xff0c;属于寻找相同子序列的变式&#xff0c;所以需要一个二维d…

Linux命令 - 目录与文件基本操作

文章目录 1 文件系统树2 几个特殊的目录3 绝对路径与相对路径4 文件系统中跳转与浏览4.1 文件系统中跳转4.2 查看目录内容4.2.1 ls命令详解4.2.2 确定文件类型示例 5 操作目录与文件5.1 强大的通配符5.2 复制目录/文件5.3 移动/重命名目录/文件5.4 删除目录/文件5.5 创建目录5.…

基于STM32的自动化植物浇灌系统教学

引言 随着城市化进程的加快&#xff0c;越来越多的人开始关注家庭园艺与植物养护。基于STM32的自动化植物浇灌系统可以帮助用户在忙碌的生活中顺利管理植物的水分需求。本教学文章将指导您如何利用STM32构建一个简单实用的植物浇灌系统&#xff0c;实现自动浇水功能。 环境准备…

美格智能5G车规级通信模组: 5G+C-V2X连接汽车通信未来十年

自2019年5G牌照发放开始&#xff0c;经过五年发展&#xff0c;我国5G在基础设施建设、用户规模、创新应用等方面均取得了显著成绩&#xff0c;5G网络建设也即将从基础的大范围覆盖向各产业融合的全场景应用转变。工业和信息化部数据显示&#xff0c;5G行业应用已融入76个国民经…

【CRM系统选型指南:国内八大主流工具比较】

本文将对十大主流CRM系统进行比较&#xff1a;纷享销客、Zoho CRM、Pipedrive、简信CRM、HubSpot CRM、八百客CRM、金蝶CRM、浪潮CRM、销售易CRM 本文将深入评比2024年主流的CRM系统&#xff0c;帮助你了解各系统之间的主要区别、优缺点以及当前的发展趋势。通过详细的比较和分…

node.js的exports使用误区解释

exports和module.exports指向同一个对象&#xff0c;最终共享的结果&#xff0c;以module.exports指向的对象为准。 exports 和 module.exports 使用误区 使用require()导入的模块&#xff0c;使用的永远是module.exports指向的对象 实例1 exports.age 23 module.exports {n…

Maven项目的基础配置:利用IDEA将SpringBoot的项目打包成war文件

文章目录 引言Maven项目的聚合与继承(依赖管理)把项目打包成war包其他打包配置引言 利用IDEA将SpringBoot的项目打包成war文件Maven项目的聚合与继承(依赖管理)Maven项目的聚合与继承(依赖管理) 把项目打包成war包 利用IDEA将SpringBoot的项目打包成war文件:要配置启动…

Nuxt.js 应用中的 nitro:config 事件钩子详解

title: Nuxt.js 应用中的 nitro:config 事件钩子详解 date: 2024/11/2 updated: 2024/11/2 author: cmdragon excerpt: nitro:config 是 Nuxt 3 中的一个生命周期钩子,允许开发者在初始化 Nitro 之前自定义 Nitro 的配置。Nitro 是 Nuxt 3 的服务器引擎,负责处理请求、渲…

51c大模型~合集14

我自己的原文哦~ https://blog.51cto.com/whaosoft/11603879 # LLM 结构化数据生成原理 如何结合人工规则让 LLM 输出符合 JSON 格式的数据。 目前 LLM&#xff08;Large Language Model&#xff09;从文本补全到内容创作&#xff0c;都展示出了强大的生成能力。然而通过 L…

CSRA的LINUX操作系统24年11月2日下午上课笔记

压缩和解压缩&#xff1a;zip 、gzip、bz、xz # zip 压缩 # 压缩文件夹 # 解压缩 # unzip -v 查看压缩包中的内容 # bzip2 dir1/* :将dir1中的所有文件压缩 # gzip # 压缩文件夹 # 解压缩 tar 归档命令&#xff1a; # 创建tar包 tar -c*f # 释放tar包 tar -xf[c] # c …

MyBatis 返回 Map 或 List<Map>时,时间类型数据,默认为LocalDateTime,响应给前端默认含有‘T‘字符

一、问题 MyBatis 返回 Map 或 List时&#xff0c;时间类型数据&#xff0c;默认为LocalDateTime Springboot 响应给前端的LocalDateTime&#xff0c;默认含有’T’字符&#xff0c;如何统一配置去掉 二、解决方案 1、创建配置类&#xff0c;对ObjectMapper对象进行定制&am…

数据结构算法篇--递归(c语言版)

目录 1.递归 1.1求阶乘&#xff1a; 1.2.斐波那契数 1.3. 求幂 1.递归 在C语言中&#xff0c;递归是一种函数调用自身的方法&#xff0c;用来解决一些具有重复性质的问题。例如&#xff0c;计算阶乘、斐波那契数列等问题都可以通过递归实现。 递归在书写的时候&#xff0…