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

news2024/11/5 22:02:13

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默认初始化时显示第一个slide
        initialSlide: 0,
        // 自动播放
        autoplay: {
          // 隔×秒自动滑动一次
          delay: 2000,
          stopOnLastSlide: false,
          // 设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。默认为true
          disableOnInteraction: 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.1
      this.$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.1
      this.$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.coloradmin.cn/o/2233847.html

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

相关文章

Node.js 入门指南:从零开始构建全栈应用

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js-入门指南&#xff1a;从零开始构建全栈应用 前言 大家好&#xff0c;我是青山。作…

favicon是什么文件?如何制作网站ico图标?

一般我们做网站的话&#xff0c;都会制作一个独特的ico图标&#xff0c;命名为favicon.ico。这个ico图标一般会出现在浏览器网页标题前面。如下图红色箭头所示&#xff1a; 部分博客导航大全也会用到所收录网站的ico图标。比如boke123导航新收录的网站就不再使用网站首页缩略图…

“大跳水”的全新奥迪A3,精准狙击年轻人的心

文/王俣祺 导语&#xff1a;随着传统豪华品牌在国内市场的全面崩盘&#xff0c;奥迪再一次坐不住了。这次&#xff0c;奥迪“割肉”的目标瞄准了被称为“年轻人第一台豪车”的奥迪A3&#xff0c;这款车问世以来&#xff0c;就凭借出色的性能与品质收获了一大批年轻粉丝。如今&a…

两台手机如何提词呢,一台手机后置高清摄像一台手机前置提词+实时监测状态的解决方案来喽

拍视频只会用前置摄像头可不行啊&#xff0c; 后置高清才会更有流量&#xff0c; 你看哦&#xff0c;我用的是后置摄像头拍摄&#xff0c; 然后前面就用来提词&#xff0c; 它不光能提词&#xff0c; 和其他家不一样的是&#xff0c; 还能把后面手机画面投影到前面手机 这样呀&…

[SWPUCTF 2021 新生赛]easy_sql的write up

开启NSSCTF靶场&#xff0c;在浏览器中访问链接&#xff0c;看到让我们输入点什么还有标签页名字提示&#xff1a; "参数是wllm" 直接/?wllm1访问一下&#xff1a; 这里就直接用sqlmap直接爆破了&#xff1a; 查看数据库有哪些&#xff1a; python sqlmap.py -u …

Tr2 CYT2B75使用记录(二):GPIO、串口、CAN(FD)和busoff检测、看门狗和复位原因

目录 概述GPIO串口1.FIFO2.中断 CANFDRX Buffer and FIFO ElementTX Buffer Elementbusoff 检测 看门狗复位原因 待梳理 概述 GPIO 1.如何定位IO的作用 2.读取电平必须为输入模式 串口 熟悉手册串口特性如下&#xff1a; ■ 数据帧大小可从4位编程到16位 ■ STOP位的可编程…

Android13 系统/用户证书安装相关分析总结(二) 如何增加一个安装系统证书的接口

一、前言 接着上回说&#xff0c;最初是为了写一个SDK的接口&#xff0c;需求大致是增加证书安装卸载的接口&#xff08;系统、用户&#xff09;。于是了解了一下证书相关的处理逻辑&#xff0c;在了解了功能和流程之后&#xff0c;发现settings中支持安装的证书&#xff0c;只…

【Java语言】继承和多态(一)

继承 继承就是实现代码的复用&#xff1b;简而言之就是重复的代码作为父类&#xff08;基类或超类&#xff09;&#xff0c;而不同的可以作为子类&#xff08;派生类&#xff09;。如果子类想要继承父类的成员就一定需要extends进行修饰&#xff08;如&#xff1a;&#xff08;…

04_CC2530+Uart串口通信

04_CC2530UART串口通信 串口通信基本概念 串行通信: 数据字节一位位地依次传送的通信方式, 串行通信的速度慢, 但用的传输线条数少, 成本低&#xff0c;适用于远距离的数据传送并行通信: 数据字节的各位同事传送的通信方式, 优点是数据传送速度快, 缺点是占用的传输线条数多,…

【计算机网络安全】湖北大学–DNS欺骗实验

目录 0x00 ettercap-原理 0x01 ettercap-arp欺骗 0x02 ettercap-dns劫持 0x00 ettercap-原理 攻击者冒充域名服务器&#xff0c;然后把查询的IP地址设为攻击者的IP地址。这样的话&#xff0c;用户上网就只能看到攻击者的主页&#xff0c;而不是用户想要取得的网站。 首先&…

雷池社区版新版本功能防绕过人机验证解析

前两天&#xff0c;2024.10.31&#xff0c;雷池社区版更新7.1版本&#xff0c;其中有一个功能&#xff0c;新增请求防重放 更新记录&#xff1a;hhttps://docs.waf-ce.chaitin.cn/zh/%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95 仔细研究了这个需求&#xff0c;…

【深度学习基础】深入理解 卷积与卷积核

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;深度学习_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 卷积 1.1 …

SpringBoot集成Shiro+Jwt+Redis

1. 概述 首先需要知道为什么使用 ShiroJwtRedis 进行登录认证和权限控制。 1. 为什么用Shiro&#xff1f; 主要用的是 shiro 的登录认证和权限控制功能。 Shiro 参见本栏目文章 &#x1f343;《Shiro实战》 2. 为什么用Jwt&#xff1f; Shiro 默认的 Session 机制来帮助实现…

基于Python的乡村居民信息管理系统【附源码】

基于Python的乡村居民信息管理系统 效果如下&#xff1a; 系统主页面 系统登录页面 管理员主页面 居民管理页面 政务学习页面 土地信息管理页面 个人信息管理页面 居民登陆页面 村委人员主页面 研究背景 随着信息技术的飞速发展和乡村振兴战略的深入实施&#xff0c;传统的乡…

HTML 基础标签——表单标签<form>

文章目录 1. `<form>` 标签:定义表单容器2. `<input>` 标签:多用途输入控件3. `<textarea>` 标签:多行文本输入框4. `<select>` 标签:下拉选择框5. `<option>` 标签:下拉菜单选项6. `<button>` 标签:按钮元素7. `<label>` 标签…

Debian的基本使用

前言 本人撰写的相关文档中&#xff0c;部分技术已经不再提供支持了&#xff08;不得不感慨&#xff0c;菜鸡的个人进步追不上技术更新啊&#xff09;&#xff0c;比如Centos、EasyExcel&#xff0c;虽然说目前仅使用还没有什么问题&#xff0c;但是还是要了解一下备用方案。 …

比亚迪能不能打败特斯拉?

文/孔文清 比亚迪在第三季度的财报发布后&#xff0c;首次在营收上超越了特斯拉&#xff0c;这是电动汽车行业的重要时刻&#xff0c;也反映了中国产业在全球市场中的崛起。 比亚迪在其2024年第三季度财报中首次实现了2011.2亿元的营业收入&#xff0c;相比特斯拉的1793亿元&a…

什么情况下,不推荐建立索引?

一般有以下几种情况不推荐建立索引&#xff1a; 1&#xff09;对于数据量很小的表 当表的数据量很小&#xff08;如几百条记录&#xff09;时&#xff0c;建立索引并不会显著提高查询性能&#xff0c;反而可能增加管理的复杂性&#xff1b; 2&#xff09;频繁更新的表 对于…

深度学习基础知识-残差网络ResNet

目录 一、ResNet 的核心思想&#xff1a;残差学习&#xff08;Residual Learning&#xff09; 二、ResNet 的基本原理 三、ResNet 网络结构 1. 残差块&#xff08;Residual Block&#xff09; ResNet 的跳跃连接类型 2. 网络结构图示 四、ResNet 的特点和优势 五、ResNe…

做反向代购没货源,也能靠“东方玄学”风生水起?

在全球化日益加深的今天&#xff0c;文化的交流与碰撞愈发频繁。近年来&#xff0c;一股神秘的东方力量——风水玄学&#xff0c;在海外社交媒体上悄然走红&#xff0c;成为众多外国友人追捧的新风尚。从TikTok到Instagram&#xff0c;无数华人博主通过分享风水知识、解读玄学饰…