基于elementui的轮播图

最新推荐文章于 2025-02-19 08:00:00 发布

橘哥哥

最新推荐文章于 2025-02-19 08:00:00 发布

阅读量3.2k

点赞数 1

分类专栏： vue elementui 文章标签： elemetui vue

本文链接：https://blog.youkuaiyun.com/ju__ju/article/details/128591294

版权

vue 同时被 2 个专栏收录

42 篇文章

订阅专栏

elementui

8 篇文章

订阅专栏

基于elementui的走马灯组件改的轮播图,便于展示当前播放的图片

<template>
  <div class="center home-events-box">
    <el-row type="flex" style="height: 56px;line-height: 56px;margin-bottom:37px" justify="space-between" :gutter="10">
      <el-col style="font-size: 24px;" :span="12">赛事活动</el-col>
      <el-col class="text-right" :span="12">
        <el-button size="mini">查看更多</el-button>
      </el-col>
    </el-row>
    <el-carousel class="carousel-chart-box" :interval="4000" type="card" arrow="never" indicator-position="none" :autoplay="false" height="305px">
      <el-carousel-item v-for="(item,key) in images" :key="key">
        <img :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "homeEvents",
  data() {
    return {
      images: [
        {
          img: require("@/assets/images/ilabx-project/1.png"),
        },
        {
          img: require("@/assets/images/ilabx-project/2.png"),
        },
        {
          img: require("@/assets/images/ilabx-project/3.png"),
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.home-events-box {
  height: 460px;
  background: #fff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  .el-carousel__item--card.is-active {
    width: 95% !important;
    transform: translateX(30px) scale(1) !important;
  }
}
</style>