element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)

简介: element中使用走马灯效果el-carousel点击按钮切换第几页demo效果示例(整理)
<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>

相关文章
|
9月前
|
前端开发
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
63 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2506 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
12月前
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
595 0
|
2月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
8月前
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
37 0
uniapp使用button移除边框效果demo(整理)
uniapp使用button移除边框效果demo(整理)
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
|
10月前
|
JavaScript
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
Vue中使用element-ui的el-dialog对话框,实现拖拽效果(整理)
|
10月前
|
JavaScript
js简单全选及反选demo效果示例(整理)
js简单全选及反选demo效果示例(整理)
|
12月前
|
容器
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
Echarts实战案例代码(50):tooltip组件提示框被div折叠的解决方案
117 0