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>

相关文章
element-plus:Dialog 对话框在有滚动条的页面会抖动
element-plus:Dialog 对话框在有滚动条的页面会抖动
1096 0
element-plus:Dialog 对话框在有滚动条的页面会抖动
element-使用el-date-picker 选择日期后返回周几(整理)
element-使用el-date-picker 选择日期后返回周几(整理)
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
【vue2】切换页面之后滚动条停留在上个页面的位置,解决方案
1074 6
|
JavaScript
Uniapp实现时间选择器
Uniapp实现时间选择器
1330 0
|
JavaScript
Vue2横向文字滚动
这篇文章介绍了如何在Vue 2框架中实现一个横向滚动文本的组件,允许自定义滚动文本内容、滚动区域尺寸和滚动速度等属性。
605 0
Vue2横向文字滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
3926 0
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
863 1
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
7522 0