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>

相关文章
|
前端开发
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
10EasyUI 菜单与按钮- 创建链接按钮(Link Button)
88 0
|
JavaScript
js点击button,在页面上创建一个三行四列的表格
js点击button,在页面上创建一个三行四列的表格
209 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2149 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
972 0
|
7月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
62 0
|
JavaScript Java
jQuery点击checkbox选择标签到指定的位置
jQuery点击checkbox选择标签到指定的位置
54 0
|
JavaScript
element-ui的popover弹出框点击取消
element-ui的popover弹出框点击取消
276 1
elementUI 的el-select组件编辑时点击没反应效果demo(整理)
elementUI 的el-select组件编辑时点击没反应效果demo(整理)