element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
示例 效果 整理 切换 点击 按钮 Demo Element
2023-09-14 09:04:05 时间
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false" ref="toggle">
<el-carousel-item v-for="item in 3" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
<el-button v-else type="primary" icon="el-icon-caret-right" @click="showstep(2)">第三页</el-button>
</template>
methods: {
//点击切换置第三页
showstep(ind) {
this.$refs.toggle.setActiveItem(ind)
}
}
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
相关文章
- html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
- SkeyeWebPlayer网页直播点播播放器-页面动态多播放器添加代码示例
- 详解Oracle自定义异常示例
- java连接mysql示例代码详解编程语言
- JS实现图片横向滚动效果示例代码
- div模拟滚动条效果示例代码
- 使用Curl进行抓取远程内容时url中文编码问题示例探讨
- 动态标签悬停效果延迟加载示例代码
- Repeater中嵌套Repeater的示例介绍
- jQuery的DOM操作之删除节点示例
- jquery实现鼠标拖动图片效果示例代码
- javastringbuffer的用法示例
- JS数组去重与取重的示例代码
- python实现socket端口重定向示例
- php根据isbn书号查询amazon网站上的图书信息的示例
- jquery获取元素索引值index()示例
- window.onload追加函数使用示例
- android界面布局之实现文本块布局效果示例
- 首页图片漂浮效果示例代码
- QQ空间顶部折页撕开效果示例代码
- jquery中each方法示例和常用选择器
- 一个简单的全屏图片上下打开显示网页效果示例
- 使用sql语句创建和删除约束示例代码