vue.js 页面中设置多个swiper

效果:

设置主要设置了 动态的 包含类、 左右按钮的类

<template><div class="swiper-container_other"><!-- 右侧按钮 --><div :class="[(id+'')?'swiper-button-next'+id:'swiper-button-next', 'swiper-button-next']"></div><div class="all_slide" :style="`width: ${width}; height: ${height};`"><!-- 中间滑块部分 --><div :class="[(id+'')?'swiper-container'+id : 'swiper-container', 'one-container']"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div></div></div><!-- 左侧按钮 --></div><div :class="[(id+'')?'swiper-button-prev'+id:'swiper-button-prev', 'swiper-button-prev']"></div></div>
</template>
<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";
export default {name: "Carousel",props: {imageData: {// 图片数组type: Array,default: () => {return [];},},width: {// 宽度type: String,default: "1200px",},id: {// 宽度type: String,default: "0",},height: {// 高度type: String,default: "400px",},},data() {return {swiper: null,};},mounted() {this.$nextTick(() => {let c = ".swiper-container"+this.id;console.log('cccc:',c);this.swiper = new Swiper(c, {mousewheel: false, // 是否开启鼠标滚轮控制swiper切换 ,默认falsedirection: "horizontal", // 滑动方向// speed: 3000, // 切换速度,自动滑动开始到结束的时间spaceBetween: 30, // 在slide之间设置距离loop: true, // 无限循环// grabCursor: true, // 悬浮时鼠标样式切换slidesPerView: "auto",navigation: {nextEl: ".swiper-button-next"+this.id,prevEl: ".swiper-button-prev"+this.id,},});})},
};
</script>
<style lang="less" scoped>
.swiper-container_other{margin: 0 auto;position: relative;
}
.swiper-wrapper{border: 1px solid blue;margin: 0 auto;
}
.swiper-button-prev{left: 0px!important;
}
.swiper-button-next{right: 0px!important;
}
.all_slide {width: 100%;height: 220px;margin: 0 auto;position: relative;
}
.one-container {width: 100%;height: 100%;overflow: hidden;// display: flex;
}
.cont {width: 80%;margin: 0 auto;
}
.swiper-slide {text-align: center;font-size: 18px;background: #fff;background: skyblue;width: 390px;}
</style>

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

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

相关文章

浅易理解:卷积神经网络(CNN)

浅易理解卷积神经网络流程 本文的目录&#xff1a; 1 什么卷积神经网络 2 输入层 3 卷积层 4 池化层 5 全连接层 1 什么是卷积神经网络 1.1卷积神经网络&#xff08;Convolutional Neural Networks, CNN&#xff09; 是一种前馈神经网络&#xff0c;它的人工神经元可以响应一…

golang中new和make的区别

1. 先看一个例子 package mainimport "fmt"func main() {var a *int*a 10fmt.Println(*a) }运行结果是啥呢&#xff1f; 问&#xff1a;为什么会报这个panic呢&#xff1f; 答&#xff1a;因为如果是一个引用类型&#xff0c;我们不仅要声明它&#xff0c;还要为…

Linux命令-权限管控

Linux命令-权限管控 目录 Linux命令-权限管控rootsu&#xff08;switch user&#xff09;sudo用户、用户组查看权限管控信息修改权限控制chmodchown 对于Linux中权限的讲解以及对权限的一些操作 root 超级管理员&#xff0c;拥有最大系统操作权限普通用户一般在其HOME目录内是…

Leetcode 675 为高尔夫比赛砍树

文章目录 1. 题目描述2. 我的尝试3. 题解1. BFS 1. 题目描述 Leetcode 675 为高尔夫比赛砍树 2. 我的尝试 typedef priority_queue<int, vector<int>, greater<int>> heap;class Solution { public:int m;int n;int bfs(vector<vector<int>>&…

2024中国(京津冀)太阳能光伏推进大会暨展览会

2024年中国(京津冀)太阳能光伏推进大会暨展览会是一个旨在促进太阳能光伏产业发展的重要会议和展览会。该活动将在中国的京津冀地区举行&#xff0c;旨在汇聚全球太阳能光伏领域的专业人士、政府代表、企业家和科研人员&#xff0c;共同探讨太阳能光伏技术的最新进展和未来发展…

数据集成工具 ---- datax 3.0

1、datax: 是一个异构数据源离线同步工具&#xff0c;致力于实现关系型数据库&#xff08;mysql、oracle等&#xff09;hdfs、hive、hbase等各种异构数据源之间的数据同步 2、参考网址文献&#xff1a; https://github.com/alibaba/DataX/blob/master/introduction.md 3、Da…

避抗指南:如何寻找OLED透明屏供应商

寻找OLED透明屏供应商&#xff0c;你可以按照以下步骤进行&#xff1a; 明确需求&#xff1a;首先&#xff0c;你需要明确自己的需求&#xff0c;包括所需OLED透明屏的尺寸、分辨率、亮度、色彩饱和度等具体参数&#xff0c;以及预算和采购量。这有助于你更精准地找到符合需求的…

【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片

特性&#xff1a; 支持设置初始索引值支持显示标题、日期、大小、当前图片位置支持无限循环切换轮播支持鼠标滑轮滚动、左右键、上下键、PageUp、PageDown、Home、End操作切换图片支持Esc关闭窗口 sgPhotoPlayer源码 <template><div :class"$options.name"…

革命性创新:聚道云软件连接器如何为企业重塑财务管理流程?

一、客户介绍 某科技股份有限公司是一家专注于高性能存储技术领域的创新型科技公司。自公司成立以来&#xff0c;该公司始终秉持创新发展的理念&#xff0c;致力于为客户提供卓越的存储解决方案&#xff0c;以满足不同行业对数据存储的需求。作为业界的佼佼者&#xff0c;该公…

SpringBoot(依赖管理和自动配置)

文章目录 1.基本介绍1.springboot是什么&#xff1f;2.快速入门1.需求分析2.环境配置1.确认开发环境2.创建一个maven项目3.依赖配置 pom.xml4.文件目录5.MainApp.java &#xff08;启动类&#xff0c;常规配置&#xff09;6.HelloController.java &#xff08;测试Controller&a…

数字证书在网络安全中的重要性与实际应用

数字证书作为一种“电子身份证”&#xff0c;在当今数字化的商业环境中有着广泛的实际应用。它主要用于身份认证、加密通信、电子签名和安全访问控制等方面&#xff0c;为各行各业提供了安全可靠的数字化解决方案。 网络安全领域 在网络通信中&#xff0c;数字证书被广泛应用…

String 底层是如何实现的?

1、典型回答 String 底层是基于数组实现的&#xff0c;并且数组使用了 final 修饰&#xff0c;不同版本中的数组类型也是不同的&#xff1a; JDK9 之前&#xff08;不含JDK9&#xff09; String 类是使用 char[ ]&#xff08;字符数组&#xff09;实现的但 JDK9 之后&#xf…

MySQl基础入门⑧

上一章的内容 练习&#xff01;上一章表的内容&#xff01;&#xff01;&#xff01;熟能生巧 先重新创建一个数据库 命令create database supermarket; 然后查看数据库、再切换到当前数据库。 查看数据库 : show databases; 切换到当前数据库: use supermarket;创建员工…

动态规划:4种遍历方向图解+Python实现

前言 动态规划类题型在遍历过程中&#xff0c;根据状态转移函数的不同&#xff0c;代码实现时遍历的方向也会有所差异。总的来说&#xff0c;一共可以总结为下图四种模式&#xff1a; 红色五角星表示当前要计算的状态值&#xff1b;白底箭头代表哪些状态要提前算出来&#xf…

【C++设计模式】UML图的介绍及其画法

文章目录 前言一、UML图的介绍1.1 UML图是什么1.2 UML图的作用 二、UML图的画法2.1 最简单的UML图2.2 继承的UML图2.3 关联关系2.4 聚合关系2.5 组合关系2.6 依赖关系 总结 前言 在软件开发过程中&#xff0c;设计模式是一种被广泛应用的方法&#xff0c;它为解决特定问题提供…

【C++】AVL树的插入、旋转

目录 一、AVL树介绍1.1 概念1.2 定义 二、AVL树的实现2.1 插入2.2 旋转2.2.1 左单旋2.2.2 右单旋2.2.3 左右双旋2.2.4 右左双旋 一、AVL树介绍 1.1 概念 AVL树是高度平衡的二叉搜索树&#xff0c;相比普通的二叉搜索树&#xff0c;它防止了变成单支树的情况。因为AVL树每插入…

云服务器2核4G配置,阿里云和腾讯云哪个便宜?性能更好?

租用2核4G服务器费用多少&#xff1f;2核4G云服务器多少钱一年&#xff1f;1个月费用多少&#xff1f;阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年&#xff1b;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

C语言快速入门之字符函数和字符串函数

一.字符分类函数和字符转换函数 C语言中有一系列的函数专门做字符分类的&#xff0c;就是区分一个字符是属于什么类型的&#xff0c;头文件是 #include <ctype.h> 以下是具体函数&#xff1a; 这些函数的使用方法类似&#xff0c;我们写出一些代码来举例。 例如&…

解决ChatGPT发送消息没有反应

ChatGPT发消息没反应 今天照常使用ChatGPT来帮忙码代码&#xff0c;结果发现发出去的消息完全没有反应&#xff0c;即不给我处理&#xff0c;也没有抱任何的错误&#xff0c;按浏览器刷新&#xff0c;看起来很正常&#xff0c;可以查看历史对话&#xff0c;但是再次尝试还是一…

基于springboot+vue的线上教育系统(源码+论文)

目录 前言 一、功能设计 二、功能实现 三、库表设计 四、论文 前言 现在大家的生活方式正在被计算机的发展慢慢改变着&#xff0c;学习方式也逐渐由书本走向荧幕,我认为这并不是不能避免的,但说实话,现在的生活方式与以往相比有太大的改变&#xff0c;人们的娱乐方式不仅仅…