vue使用carousel(走马灯)开发轮播图

news2024/9/24 17:17:41

在main.js 引入

import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);
在这里插入代码片
<template>
    <div>
        <div class="my-swipe">
            <carousel :per-page="1" :loop="true" :autoplay="true" :paginationEnabled="true" :paginationPadding="3" :paginationSize="8">
                <slide v-for="(slide, index) in imgs" :key="index">
                    <img :src="slide" alt="Slide" width="100%;"/>
                </slide>
            </carousel>
        </div>

    </div>
</template>

<script>
    export default {
        name: "swipe",
        data(){
            return{
                imgs:[]
            }
        },
        mounted(){
        },
        methods:{
       
  
        }
        
    }
</script>

<style scoped>
    .my-swipe{
        width: 100%;
        max-width: 800px; /* 根据需要设置轮播图容器的宽度 */
        margin: 0 auto;
    }
</style>

访问官网:
https://ssense.github.io/vue-carousel/guide/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

科学清理Windows系统垃圾,让你的电脑性能快如火箭

文章目录 1. 使用磁盘清理工具2. 清理临时文件2.1 清理用户临时文件夹2.2 清理系统临时文件夹2.3 清理系统临时文件 3.卸载不需要的程序4. 删除不必要的下载文件5. 清理回收站6. 压缩磁盘7. 删除旧的系统还原点8. 禁用休眠功能9. 定期进行磁盘碎片整理10. 禁用不必要的启动项11…

JOE alkyne, 6-isomer可以与许多化合物进行反应,包括醇、酚、胺、羧酸等

试剂 | 基础知识概述&#xff08;部分&#xff09;: 英文名&#xff1a;JOE alkyne, 6-isomer 分子式&#xff1a;C26H17NCl2O8 分子量&#xff1a;542.32 Ex&#xff1a;533nm Em&#xff1a;554nm 规格标准&#xff1a;1g、5g、10g&#xff0c;可提供mg级以及kg级的产品…

2023年全球线上教育营收规模及未来发展趋势分析:推动知识付费市场增长[图]

随着知识经济的到来&#xff0c;我们的学习模式受到了前所未有的冲击&#xff0c;各种新的学习模式如潮水般涌现&#xff0c;在所有学习模式中&#xff0c;最具有冲击力的便是随着网络技术发展而出现的网络化学习&#xff0c;又称在线学习&#xff0c;它是通过在网上建立教育平…

一些ECharts配置

基于vue3&#xff0c;EChart5.4.3版本 Line <script setup lang"ts"> import {onBeforeUnmount, onMounted, ref, watch} from "vue" import {useEcharts, type ECOption} from "/composables" import * as echarts from "echarts/c…

API网关与社保模块

API网关与社保模块 理解zuul网关的作用完成zuul网关的搭建 实现社保模块的代码开发 zuul网关 在学习完前面的知识后&#xff0c;微服务架构已经初具雏形。但还有一些问题&#xff1a;不同的微服务一般会有不同的网 络地址&#xff0c;客户端在访问这些微服务时必须记住几十甚至…

​iOS上架App Store的全攻略

第一步&#xff1a;申请开发者账号 在开始将应用上架到App Store之前&#xff0c;你需要申请一个开发者账号。 1.1 打开苹果开发者中心网站&#xff1a;Apple Developer 1.2 使用Apple ID和密码登录&#xff08;如果没有账号则需要注册&#xff09;&#xff0c;要确保使用与公…

【Unity3D编辑器拓展】Unity3D的IMGUI、GUI、GUILayout、EditorGUI、EditorGUILayout、OnGUI【全面总结】

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在开发中&#xff0c;常常会遇到要使用OnGUI的地方。 也会遇到…

4090今天被下架了

刚看了一下基本知识&#xff0c;我来给他们简单普及一下它。 4090网吧还有Ai公司都很常用&#xff0c;比如我们公司就用他来训练数字人。 4090经测试&#xff0c;训练的速度是3060的8倍。也就是说&#xff0c;我训练一个数字人要1天&#xff0c;但是3060需要8天。这个成本显而…

统计学习方法 感知机

文章目录 统计学习方法 感知机模型定义学习策略学习算法原始算法对偶算法 学习算法的收敛性 统计学习方法 感知机 读李航的《统计机器学习》时&#xff0c;关于感知机的笔记。 感知机&#xff08;perceptron&#xff09;是一种二元分类的线性分类模型&#xff0c;属于判别模型…

1024程序员节特辑 | OKR VS KPI谁更合适?

专栏集锦&#xff0c;赶紧收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https://blog.…

预测性维护为何能够帮助企业降低设备维护成本?

预测性维护在企业设备管理中扮演着重要的角色&#xff0c;它通过实时监测设备状态和数据分析&#xff0c;能够提前预测潜在故障&#xff0c;并采取相应的维修措施&#xff0c;从而帮助企业降低设备维护成本。本文将介绍预测性维护的作用&#xff0c;探讨造成设备维护成本高的原…

板带纠偏控制系统伺服比例阀放大器

板带纠偏控制系统是集光、机、电、液四方面有机结合在一起的全闭环电液伺服系统&#xff0c;是用途广泛的机电一体化高新技术产品。 板带纠偏控制系统可广泛地应用于机械、冶金、造纸、橡胶、织带、纺织印染、电镀、塑膜胶片等诸多行业的不同种类的带材生产线的在线纠偏。 板…

UE5 ChaosVehicles载具换皮 (连载二)

1.导出SKM_SportsCar&#xff0c;删除模型&#xff0c;保留骨骼层级 2.导入新的汽车模型并合并成一个整体模型&#xff0c;调整上图红框中的四个快乐轮子对应的骨骼位置&#xff08;大致在快乐轮子的中心&#xff09;&#xff0c;骨骼角度归零。绑定并设置权重&#xff0c;快乐…

多线程进阶篇

多线程进阶篇 文章目录 多线程进阶篇1、常见的锁策略1) 乐观锁 vs 悲观锁2) 重量级锁 vs 轻量级锁3) 自旋锁 vs 挂起等待锁4) 读写锁 vs 互斥锁5) 公平锁 vs 非公平锁6) 可重入锁 vs 不可重入锁 2、死锁1) 死锁的三种典型情况:2) 如何解决死锁问题3) 死锁产生的必要条件 3、Syn…

数据结构:一篇拿捏十大排序(超详细版)

排序的概念&#xff1a; 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经…

浅谈AI人体姿态识别技术的先进性及安防视频监控应用场景

随着计算机视觉技术和安防监控技术的不断发展&#xff0c;基于AI算法的人体姿态识别技术也得到了广泛的应用。然而&#xff0c;传统的安防监控系统通常只局限于简单的视频监控等功能&#xff0c;无法准确地识别人体的姿态&#xff0c;使得一些安防监控存在着一定的漏洞和不足之…

中国人民大学与加拿大女王大学金融硕士项目——开启全球金融视野,锻造未来领袖

你是否曾梦想过站在国际金融的巅峰&#xff0c;洞察全球经济的脉搏&#xff0c;引领企业的创新与发展&#xff1f;如果你对金融充满热情&#xff0c;渴望在全球化的环境中锻炼自己&#xff0c;那么&#xff0c;中国人民大学与加拿大女王大学金融硕士项目便是你的转折点。 中国…

Confluence使用教程

1、如何创建空间 可以把空间理解成一个gitlab仓库&#xff0c;空间之间相互独立&#xff0c;一般建议按照部门&#xff08;小组的人太少&#xff0c;没必要创建空间&#xff09;或者按照项目分别创建空 2、confluence可以创建两种类型的文档&#xff1a;页面和博文 从内容上来…

SICP-- 元语言抽象--Scheme的变形--惰性求值

正则序和应用序 应用序&#xff1a;在过程应用时&#xff0c;提供给Scheme的所有参数都需要完成求值 正则序&#xff1a;将把对过程参数的求值延后到需要这些实际参数的值的时候。 将过程参数的求值拖延到最后的可能时刻被称为 惰性求值 如果在某个参数还没有完成求值之前就…

Apache Jmeter测压工具快速入门

Jmeter测压工具快速入门 一、Jmeter介绍二、Jmeter On Mac2.1 下载2.2 安装2.2.1 环境配置2.2.2 初始化设置 2.3 测试2.3.1 创建JDBC Connection Configuration2.3.2 创建线程组2.3.3 创建JDBC Request2.3.4 创建结果监控2.3.4 运行结果 2.4 问题记录2.4.1 VM option UseG1GC异…