vue中使用swiper5方式
作者:闪电松鼠~ 发布时间:2023-07-02 17:07:03
标签:vue,使用,swiper5
vue使用swiper5
官网使用方法 详情 :Swiper使用方法 - Swiper中文网
在vue中使用 首先 npm install --save swiper@5 // 安装5.xx版本的swiper
1. 引入css js 文件
由于在多个组件中使用 所以直接在路口文件中引入css文件
在需要使用轮播图的组件中引入js文件
2.在需要使用轮播图的组件中生成dom结构
可以直接去swiper官网复制
3.watch监听数据,确保swiper渲染时一定有数据
$nextTick 确保 new swiper时 一定有dom结构
($nextTick 经常与操作dom的动作一块使用,$nextTick 可以确保dom已经生成)
vue使用swiper5做一个轮播图,带有分页器、左右箭头样式
折腾了半天,可算弄好了。记成文章,防止遗忘。
1.npm安装
由于swiper5以上才支持pagination分页器换颜色,所以我们安装swiper5以及vue-awesome-swiper
npm install swiper@5.4.4 vue-awesome-swiper --save
2.所有代码
<template>
<div>
<div>
<swiper :options="swiperOptions" class="my-swiper">
<swiper-slide> <img src="../assets/img/bg_1.jpg" /> </swiper-slide>
<swiper-slide> <img src="../assets/img/bg_2.jpg" /> </swiper-slide>
<swiper-slide> <img src="../assets/img/bg_3.jpg" /> </swiper-slide>
<!-- 指示点 -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- 左右导航栏 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</div>
</template>
<script>
import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'UserCenter',
components: {
Swiper,
SwiperSlide
},
data () {
return {
swiperOptions: {
// 循环
loop: true,
// 指示点
pagination: {
el: '.swiper-pagination',
clickable: true /* 分页器点可以点击切换 */
},
// 方向:横向或者纵向vertical
direction: 'horizontal',
// 自动播放
autoplay: {
delay: 5000,
disableOnInteraction: false
},
// 切换速度
speed: 600,
// 左右箭头按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {},
mounted () {},
methods: {}
}
</script>
<style scoped>
.my-swiper{
width: 100%;
height: auto;
--swiper-navigation-color: white; /*左右箭头按钮颜色*/
--swiper-pagination-color: white; /*pagination分页器颜色*/
}
.my-swiper img {
width: 100%;
height: auto;
}
</style>
最后,看成品。
来源:https://blog.csdn.net/Dzb1993/article/details/123108889
0
投稿
猜你喜欢
- 简述和GNU一样,YAML是一个递归着说“不”的名字。不同的是,GNU对UNIX说不,YAML说不的对象是XML。YAML不是XML。为什么
- 事情是这样的,笔者在使用docx库的时候遇到了文字的缩进问题,具体需求是:正文内容每段首行顶两格,也就是向右缩进两个字符,像这样:需求看似很
- 第一招、mysql服务的启动和停止net stop mysqlnet start mysql第二招、登陆mysql语法如下: mysql -
- 在默认的情况下,MySQL搜索不区分大小写(但某些字符集始终区分大小写,如czech)。这意味着,如果你使用col_name LIKE
- Demo里的三种方法:方法1是两层div,兼容FF3.1a+, Safari 3+, Chrome, IE6/7方法2是两层div,除了IE
- 毫无疑问,Google是当今世界上最成功的互联网公司之一,但是Google也曾推出过一些失败的实验品。还记得Google Accelerat
- 先前我们讲的都是“线性结构”,他的特征就是“一个节点最多有一个”前驱“和一个”后继“。那么我们今天讲的树会是怎样的呢?我们可以对”线性结构“
- 效果演示开发工具Python版本: 3.6.4相关模块:pygame模块;PyQt5模块;以及一些Python自带的模块。环境搭建安装Pyt
- 目前网络数据库的应用已经成为最为广泛的应用之一了,并且关于数据库的安全性,性能都是企业最为关心的事情。数据库渐渐成为企业的命脉,优化查询就解
- 本文实例讲述了python自动化测试之setUp与tearDown的用法,分享给大家供大家参考。具体如下:实例代码如下:class Roma
- 前言matplotlib是一个非常强大的Python第三方绘图包,可以绘制非常多非常漂亮的图形。import numpy as npimpo
- 【源码GitHub地址】:点击进入1. 问题描述之前写了一篇关于《pytorch Dataset, DataLoader产生自定义的训练数据
- 如何正确理解和使用Command、Connection和 Recordset三个对象?我知道它们都是连接数据库的“好手”,但在编程的具体应用
- 很多时候,由于程序设计需要,要求在asp的include包含文件里调用动态的文件。如<!--#include file=&q
- 对表误删或执行缺少条件的修改 SQL 导致修改了表内其他数据时,我们需要想办法将数据恢复回来。先创建两个测试表 table_1CREATE
- 1. 概念1.1 基本概念时间,对于我们来说很重要,什么时候做什么?什么时候发生什么?没有时间的概念,生活就乱了。在日常的运维当中,我们更关
- 1.python爬虫浏览器伪装#导入urllib.request模块import urllib.request#设置请求头headers=(
- MyISAM和InnoDB对比MyISAMInnoDB主外键不支持支持事务不支持支持行表锁表锁,操作时即使操作一条记录也会锁住一整张表,不适
- 全选、全不选、反选这几个功能我们经常会用到,如我们可以用在文章列表管理页面,也可以用在音乐播放页面,使用全选我们可以很方便的进行批量操作,如
- 在推行系统中,时不时会有用户提出希望系统能自动推送邮件,由于手头的工具和能力有限,不少需求都借助于sql server的邮件触发来实现。步骤