首页 > 其他分享 >Carousel轮播图实现预览功能

Carousel轮播图实现预览功能

时间:2024-05-21 10:57:35浏览次数:17  
标签:npm 轮播 预览 viewer Viewer Carousel import true

一、vue2

1、安装

npm install [email protected]
npm i -S viewerjs

2、main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3、使用

<el-carousel :interval="4000"  arrow="always" height="150px"
                           :autoplay="true" :loop="true" indicator-position="none"
                           style="width: 350px;margin-left: 7px">
                <el-carousel-item v-for="(item,index) in point.carouselList" :key="index">
                    <img :src="item" style="width: 100%;height: 100%;background-size: contain" v-viewer>
                </el-carousel-item>
              </el-carousel>

 

标签:npm,轮播,预览,viewer,Viewer,Carousel,import,true
From: https://www.cnblogs.com/zwh0910/p/18203504

相关文章

  • SAP S4HANA 2023 PCE系统上ME23N界面里的打印预览功能不能使用?
    SAPS4HANA2023PCE系统上ME23N界面里的打印预览功能不能使用?  在老版本的SAPECC系统上,在采购订单的显示界面,我们是可以点击‘打印预览’按钮去看采购订单的打印效果的。这是一个有经验的MM模块顾问熟知的。 但是笔者的这个认知在SAPS4HANA2023PCE系统上被颠覆了!笔......
  • Microsoft Office for Mac 2024 (Office 365) 16.85 Universal 预览版下载
    MicrosoftOfficeforMac2024(Office365)16.85Universal预览版OfficeLTSC2024forMac请访问原文链接:https://sysin.org/blog/office-2024-for-mac/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org宣布推出适用于Windows和Mac的MicrosoftOfficeLTSC......
  • 微信小程序------功能组件------轮播图
    页面结构<swiperclass="content-info-slide"indicator-color="rgba(255,255,255,.5)"indicator-active-color="#fff"indicator-dotscircularautoplay><swiper-item><imagesrc="/pages/images/test.png"......
  • flutter动画— —Hero +photo_view 实现微信朋友圈图片预览
    photo_view预览单张图片依赖photo_view:^0.14.0#微信图片单张图片的预览//PhotoView(//imageProvider://NetworkImage(widget.arguments["imageUrl"]),//)classHeroPageextendsStatefulWidget{finalMaparguments;constHeroPage({super.key,req......
  • vue项目中实现表格的预览与编辑(luckysheet)
    在最近的项目中遇到了这么一个需求,需要对上传的表格进行呈现预览,并且可以在线对表格进行编辑,然后进行保存。思路:用到的组件 luckysheet   exceljs  FileSaver  LuckyExcel相关依赖:npminstallexceljsnpminstallFileSavernpminstallluckyexcel 相关步骤:......
  • .NET ASPIRE 预览版 7 发布
    .NETAspire预览版7并不是原计划的一部分,此预览版有很多重大API更改,部分原因是一旦产品发布,我们将致力于稳定的API表面。可以说,Aspire团队希望确保在最终发布之前完成这些API更改。但作为开发人员,我们会喜欢能够对快速发展的开发生态系统中的变化做出快速反应。.NETAsp......
  • 易易二维码,多功能在线文件预览与二维码生成器
    一、引言在数字化时代,信息的传递与分享变得尤为重要。无论是商务文件、个人文档,还是活动宣传、产品推广,都需要一种高效、便捷的方式来进行信息的展示与分享。易易二维码,作为一款集多WPS、Office文件在线预览、二维码设计、二维码在线报名、网址、图文、文件转二维码以及二维码浏......
  • WEB预览CAD(手机小程序浏览DWG)二次开发图层表的方法
    前言在DWG数据库中,图层存放在图层层表McDbLayerTable()当中,层表中每一条记录称为图层表记录对象McDbLayerTableRecord()。每一个图层表记录对象都对应一个图层,而且可以设置颜色、线型、关闭/打开、冻结等属性,其中DWG数据库默认总是有一个"0"层,该层不能被删除。图层表操作1......
  • [a]html中a标签跨域属性download无效,即预期下载变成了预览
    同源,a标签downlaod属性浏览器基本都支持下载非同源,提供两个下载方法functiondownloadFile(url,filename){fetch(url).then(response=>{returnresponse.blob();}).then(blob=>{consta=document......
  • 网页布局------轮播图效果实现
    纯css实现轮播图可以看这里:纯css实现轮播图(自动轮播和手动轮播)效果_☆*往事随風*☆的博客_css轮播图-CSDN博客代码来源:html+css+jquery实现轮播图自动切换、左右切换、点击切换_jquery图片轮播幻灯片效果实现左右滚动图片切换代码-CSDN博客JS实现轮播图的三种简单方法。_js轮播......