vue el-carousel走马灯实现显示多张（5张）和（7张）

已于 2024-06-11 10:13:29 修改
阅读量1k 收藏
点赞数 4
分类专栏： js 文章标签： 前端 javascript vue.js elementui
于 2024-05-28 18:23:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfplfp1109/article/details/139274384
版权

vue el-carousel走马灯实现显示多张（5张）和（7张）
父组件不用修改，仅在子组件源码的基础上进行修改即可
直接上代码

<template>
  <div>
      <el-carousel v-if="type=='item5_xybjzq' || type=='item5_qdbjzq'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel">
        <div class="el-carousel_div_bg"><div ></div></div>
        <myCarsouselItem v-for="(item,index) in allYxbjMsgs" :key="index"
        :class="{
          'el-carousel__item_buy':item.type=='buy',
          'el-carousel__item_sale':item.type=='sale',
        }">
          <div  class="div-label">
            <div><span>{{item.name}}</span><span class="font-style-12 span-padding">{{item.title}}</span></div>
            <div class="div-container_center div-padding"><span class="font-style-20">{{item.num}}</span>万</div>
            <div ><i class="el-icon el-icon_position"></i><span class="font-style-12">{{item.position}}</span></div>
            <div class="div-padding2"><i class="el-icon el-icon_phone"></i><span class="font-style-12">{{item.phone}}</span></div>
          </div>
        </myCarsouselItem>
      </el-carousel>
      <el-carousel v-if="type=='item5_dljybj' || type=='item5_zsssbbj'" :interval="400000" type="card" height="120px" indicator-position=none ref="myCarousel">
        <myCarsouselItem2 v-for="(item,index) in allQdbjMsgs" :key="index"
        :class="{
          'el-carousel__item_dljybj':type=='item5_dljybj',
          'el-carousel__item_zsssbbj':type=='item5_zsssbbj',
        }">
          <div  class="div-label div-wbqs">
            <div class="div-padding3"><span class="font-style-20">{{item.title}}</span></div>
            <div class="div-padding2 font-style-12">报价系统评级<span class="font-style-20">{{item.bjxtpj}}</span></div>
            <div class="div-padding2 font-style-12">打包价格<span>{{item.dbjg}}</span></div>
            <div class="div-padding2 font-style-12">产品期限<span>{{item.cpqx}}</span></div>
            <div class="div-padding2 font-style-12">产品额度<span>{{item.cped}}</span></div>
          </div>
        </myCarsouselItem2>
      </el-carousel>
  </div>
</template>
<script>
import myCarsouselItem from './item-zrscbj.vue';
import myCarsouselItem2 from './item-wbqs.vue';
export default {
  name: 'PaperPart',
  props: {
    type:{
      type: String,
      require: true
    },
  },
  components: {myCarsouselItem,myCarsouselItem2},
  data () {
    return {
      //paperList: [],
        allYxbjMsgs: [
        {
          name: "张三",
          type:"buy",
          title:"拟买入私募12号",
          num: "300",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "李四",
          type:"sale",
          title:"拟买入私募12号",
          num: "280",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "王五",
          type:"buy",
          title:"拟买入私募12号",
          num: "500",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "赵六",
          type:"buy",
          title:"拟买入私募12号",
          num: "120",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        {
          name: "小七",
          type:"sale",
          title:"拟买入私募12号",
          num: "350",
          position: "济南二环东路营业部",
          phone: "15088888888",
        },
        // {
        // name: "106",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "107",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "108",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "109",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        //         {
        // name: "110",
        // bjMsg: "拟卖出100万 私募6号",
        // lxOrg: "xxx营业部",
        // phone: "15088888888",
        // },
        ],
        allQdbjMsgs: [
        {
          title: "九州证券1",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "华兴证券2",
          bjxtpj: "BB",
          dbjg: "3.0%",
          cpqx: "12月期",
          cped: "2亿元",
        },
        {
          title: "中泰证券3",
          bjxtpj: "AA",
          dbjg: "3.5%",
          cpqx: "12月期",
          cped: "4亿元",
        },
        {
          title: "中信证券4",
          bjxtpj: "BB",
          dbjg: "2.3%",
          cpqx: "12月期",
          cped: "3千万元",
        },
        {
          title: "华泰证券5",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "中信建投证券6",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "5000万元",
        },
        {
          title: "中原证券7",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1亿元",
        },
        {
          title: "招商证券8",
          bjxtpj: "BB",
          dbjg: "3.3%",
          cpqx: "12月期",
          cped: "1000万元",
        },
        ],
    }
  },
  mounted(){
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
.el-carousel_div_bg{
    width: 100%;
    height: 90%;
    position: relative; 
    div{
      position: absolute;
      top:20px;
      left:29px;
      width: 93%;
      height: 80%;
      background: url("~@/assets/images/information-show/carousel-bg.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
}
.div-wbqs{
  padding-left: 25px !important;
}
.div-label{
    padding: 10px 10px 5px 15px;
    .div-container_center{
      display: flex;
      justify-content: center;
      align-items: center;
      .font-style-20{
        font-weight: bold;
        font-size: 20px;
        line-height: 23px;
      }
    }
    .span-padding{
      padding-left: 10px;
    }
    .div-padding{
      padding:8px  0;
    }
    .div-padding2{
      padding-top:4px;
    }
    .div-padding3{
      padding-bottom:8px;
    }
    .el-icon{
      height: 14px;
      width: 14px;
      margin-right: 5px;
      text-align: left;
      vertical-align: middle;
      display:inline-flex;
    }
    .font-style-12{
        font-weight: 500;
        font-size: 12px;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        span{
          padding-left: 10px;
        }
    }
}
.el-carousel__item_buy {
  background: url("~@/assets/images/information-show/bg_cardG_01.png") no-repeat;
  background-size: cover;
  color: #995200;
  .el-icon_position{
      background: url("~@/assets/images/information-show/icon_01.png") no-repeat;
  }
  .el-icon_phone{
      background: url("~@/assets/images/information-show/icon_02.png") no-repeat;
  }
}

.el-carousel__item_sale {
  background: url("~@/assets/images/information-show/bg_cardP_02.png") no-repeat;
  background-size: cover;
  color: #1D3864;
  .el-icon_position{
      background: url("~@/assets/images/information-show/icon_position_02.png") no-repeat;
  }
  .el-icon_phone{
      background: url("~@/assets/images/information-show/icon_phone_01.png") no-repeat;
  }
}

.el-carousel__item_dljybj {
  background: url("~@/assets/images/information-show/bg_card_03.png") no-repeat;
  background-size: cover;
  color: #995200;
}
.el-carousel__item_zsssbbj {
  background: url("~@/assets/images/information-show/icon_card_04.png") no-repeat;
  background-size: cover;
  color: #1D3864;
}
.el-carousel__item{
  border-radius:10px;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
}
</style>

下面是显示5张的子组件代码：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b79d513eb30c4b29b78311f20e3fe69e.png注：左右最下面两张是做的背景图可以忽略，实际就5显示了张卡片

<template>
  <div
    v-show="ready"
    class="el-carousel__item"
    :class="{
      'is-active': active,
      'el-carousel__item--card': $parent.type === 'card',
      'is-in-stage': inStage,
      'specialIndex': specialIndex,
      'is-hover': hover,
      'is-animating': animating
    }"
    @click="handleItemClick"
    :style="itemStyle">
    <div
      v-if="$parent.type === 'card'"
      v-show="!active"
      class="el-carousel__mask">
    </div>
    <slot></slot>
  </div>
</template>
 
<script>
  import { autoprefixer } from 'element-ui/src/utils/util';
  //const CARD_SCALE = 0.83;
  export default {
    name: 'ElCarouselItem',
    props: {
      name: String,
      label: {
        type: [String, Number],
        default: ''
      },
    },
 
    data() {
      return {
        hover: false,
        translate: 0,
        scale: 1,
        active: false,
        ready: false,
        inStage: false,
        specialIndex: false,
        animating: false
      };
    },
 
    methods: {
      processIndex(index, activeIndex, length) {
        let index_=-10;
        if(activeIndex == 0) {
          switch(index){
            case length-2: index_=-2; break;
            case length-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 1: index_=1; break;
            case 2: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 1) {
          switch(index){
            case length-1: index_=-2; break;
            case 0: index_=-1; break;
            case activeIndex: index_=0; break;
            case 2: index_=1; break;
            case 3: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        } else if(activeIndex == length-2){
          switch(index){
            case length-4: index_=-2; break;
            case length-3: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-1: index_=1; break;
            case 0: index_=2; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-1){
          switch(index){
            case length-3: index_=-2; break;
            case length-2: index_=-1; break;
            case activeIndex: index_=0; break;
            case 0: index_=1; break;
            case 1: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex >= 2) {
          switch(index){
            case activeIndex-2: index_=-2; break;
            case activeIndex-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case activeIndex+1: index_=1; break;
            case activeIndex+2: index_=2; break;
            default:
              index_=-10;
          }
          return index_;
        }
      },
 
      calcCardTranslate(index, activeIndex) {
        const parentWidth = this.$parent.$el.offsetWidth;
        if(index == 0){
          return parentWidth*(0.5-0.22/2)
        }else if(Math.abs(index) == 1){
          return index>0?parentWidth*(0.5+0.22/2-0.08):parentWidth*(0.5-(0.28-0.08+0.22/2));
        }else{
          return index>0?parentWidth*(0.5+0.22/2+0.28-0.08-0.13):parentWidth*(0.5-(0.28-0.08+0.22/2)-(0.28-0.13));
        }
      },
 
      calcTranslate(index, activeIndex, isVertical) {
        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
        return distance * (index - activeIndex);
      },
 
      translateItem(index, activeIndex, oldIndex) {
        const parentType = this.$parent.type;
        const parentDirection = this.parentDirection;
        const length = this.$parent.items.length;
        if (parentType !== 'card' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        index = this.processIndex(index, activeIndex, length);
        if (parentType === 'card') {
          if (parentDirection === 'vertical') {
            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
          }
          this.inStage = Math.round(Math.abs(index)) <= 1;
          this.specialIndex = Math.round(Math.abs(index)) >= 3;
          this.active = index === 0;
          this.translate = this.calcCardTranslate(index, activeIndex);
          this.scale = Math.abs(index)==0 ? 1 : Math.abs(index)==1? 0.9 : Math.abs(index)==2? 0.8 : 0.7;
        } else {
          this.active = index === activeIndex;
          const isVertical = parentDirection === 'vertical';
          this.translate = this.calcTranslate(index, activeIndex, isVertical);
        }
        this.ready = true;
      },
 
      handleItemClick() {
        const parent = this.$parent;
        if (parent && parent.type === 'card') {
          const index = parent.items.indexOf(this);
          parent.setActiveItem(index);
        }
      }
    },
 
    computed: {
      parentDirection() {
        return this.$parent.direction;
      },
 
      itemStyle() {
        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
        const style = {
          transform: value
        };
        return autoprefixer(style);
      }
    },
 
    created() {
      this.$parent && this.$parent.updateItems();
    },
 
    destroyed() {
      this.$parent && this.$parent.updateItems();
    }
  };
</script>
<style lang="scss">
  .el-carousel__item--card {
      width: 28%;
  }
  .el-carousel__arrow--left {
    left: 15px;
  }
  .el-carousel__arrow--right {
    right: 15px;
  }
  .el-carousel__item {
    cursor: pointer;
    z-index: 1;
  }
  .el-carousel__item--card.is-in-stage {
    z-index: 2;
    .el-carousel__mask{
      display: none;
    }
  }
  .el-carousel__item--card.is-active {
    z-index: 3;
    width: 22%;
  }
  .specialIndex{
    z-index: 0
  }
</style>

下面是显示7张的子组件代码：
在这里插入图片描述

<template>
  <div
    v-show="ready"
    class="el-carousel__item"
    :class="{
      'is-active': active,
      'el-carousel__item--card': $parent.type === 'card',
      'is-in-stage': inStage,
      'specialIndex': specialIndex,
      'is-hover': hover,
      'is-animating': animating
    }"
    @click="handleItemClick"
    :style="itemStyle">
    <div
      v-if="$parent.type === 'card'"
      v-show="!active"
      class="el-carousel__mask">
    </div>
    <slot></slot>
  </div>
</template>
 
<script>
  import { autoprefixer } from 'element-ui/src/utils/util';
  //const CARD_SCALE = 0.83;
  export default {
    name: 'ElCarouselItem',
    props: {
      name: String,
      label: {
        type: [String, Number],
        default: ''
      },
    },
 
    data() {
      return {
        hover: false,
        translate: 0,
        scale: 1,
        active: false,
        ready: false,
        inStage: false,
        specialIndex: false,
        animating: false
      };
    },
 
    methods: {
      processIndex(index, activeIndex, length) {
        let index_=-10;
        if(activeIndex == 0) {
          switch(index){
            case length-3: index_=-3; break;
            case length-2: index_=-2; break;
            case length-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 1: index_=1; break;
            case 2: index_=2; break;
            case 3: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 1) {
          switch(index){
            case length-2: index_=-3; break;
            case length-1: index_=-2; break;
            case 0: index_=-1; break;
            case activeIndex: index_=0; break;
            case 2: index_=1; break;
            case 3: index_=2; break;
            case 4: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }if(activeIndex == 2) {
          switch(index){
            case length-1: index_=-3; break;
            case 0: index_=-2; break;
            case 1: index_=-1; break;
            case activeIndex: index_=0; break;
            case 3: index_=1; break;
            case 4: index_=2; break;
            case 5: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex == length-3){
          switch(index){
            case length-6: index_=-3; break;
            case length-5: index_=-2; break;
            case length-4: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-2: index_=1; break;
            case length-1: index_=2; break;
            case 0: index_=3; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-2){
          switch(index){
            case length-5: index_=-3; break;
            case length-4: index_=-2; break;
            case length-3: index_=-1; break;
            case activeIndex: index_=0; break;
            case length-1: index_=1; break;
            case 0: index_=2; break;
            case 1: index_=3; break;
            default:
              index_=-10;
          }
         return index_;
        }else if(activeIndex == length-1){
          switch(index){
            case length-4: index_=-3; break;
            case length-3: index_=-2; break;
            case length-2: index_=-1; break;
            case activeIndex: index_=0; break;
            case 0: index_=1; break;
            case 1: index_=2; break;
            case 2: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }else if(activeIndex >= 3) {
          switch(index){
            case activeIndex-3: index_=-3; break;
            case activeIndex-2: index_=-2; break;
            case activeIndex-1: index_=-1; break;
            case activeIndex: index_=0; break;
            case activeIndex+1: index_=1; break;
            case activeIndex+2: index_=2; break;
            case activeIndex+3: index_=3; break;
            default:
              index_=-10;
          }
          return index_;
        }
      },
      calcCardTranslate(index, activeIndex) {
        const parentWidth = this.$parent.$el.offsetWidth;
        if(index == 0){
          return parentWidth*(0.5-0.28/2)
        }else if(Math.abs(index) == 1){
          return index>0?parentWidth*(0.5+0.28/2)+10:parentWidth*(0.5-0.28/2-0.28)-10;
        }else if(Math.abs(index) == 2){
          return index>0?parentWidth*(0.5+0.28/2)+40:parentWidth*(0.5-0.28/2-0.28)-40;
        }else if(Math.abs(index) == 3){
          return index>0?parentWidth*(0.5+0.28/2)+70:parentWidth*(0.5-0.28/2-0.28)-70;
        }else{
          return index>0?parentWidth*(0.5+0.28/2):parentWidth*(0.5-0.28/2-0.28);
        }
      },
 
      calcTranslate(index, activeIndex, isVertical) {
        const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
        return distance * (index - activeIndex);
      },
 
      translateItem(index, activeIndex, oldIndex) {
        const parentType = this.$parent.type;
        const parentDirection = this.parentDirection;
        const length = this.$parent.items.length;
        if (parentType !== 'card' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        index = this.processIndex(index, activeIndex, length);
        if (parentType === 'card') {
          if (parentDirection === 'vertical') {
            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
          }
          this.inStage = Math.round(Math.abs(index)) <= 1;
          this.specialIndex = Math.round(Math.abs(index)) >= 3;
          this.active = index === 0;
          this.translate = this.calcCardTranslate(index, activeIndex);
          this.scale = Math.abs(index)<=1 ? 1 : Math.abs(index)==2? 0.90 : Math.abs(index)==3? 0.8 : 0.7;
        } else {
          this.active = index === activeIndex;
          const isVertical = parentDirection === 'vertical';
          this.translate = this.calcTranslate(index, activeIndex, isVertical);
        }
        this.ready = true;
      },
 
      handleItemClick() {
        const parent = this.$parent;
        if (parent && parent.type === 'card') {
          const index = parent.items.indexOf(this);
          parent.setActiveItem(index);
        }
      }
    },
 
    computed: {
      parentDirection() {
        return this.$parent.direction;
      },
 
      itemStyle() {
        const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
        const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
        const style = {
          transform: value
        };
        return autoprefixer(style);
      }
    },
 
    created() {
      this.$parent && this.$parent.updateItems();
    },
 
    destroyed() {
      this.$parent && this.$parent.updateItems();
    }
  };
</script>
<style lang="scss" scoped>
  .el-carousel__item--card {
      width: 28%;
  }
  .el-carousel__arrow--left {
    left: 15px;
  }
  .el-carousel__arrow--right {
    right: 15px;
  }
  .el-carousel__item {
    cursor: pointer;
    z-index: 1;
  }
  .el-carousel__item--card.is-in-stage {
    z-index: 2;
    .el-carousel__mask{
      display: none;
    }
  }
  .el-carousel__item--card.is-active {
    z-index: 3;
  }
  .specialIndex{
    z-index: 0
  }
</style>

参考:
https://blog.csdn.net/yu17310133443/article/details/106278680
https://blog.csdn.net/weixin_58860430/article/details/126781582

一望无空
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element-ui carousel走马灯一次轮播(显示)指定张数图片
qq_52337177的博客
03-22 4172
vue+element-ui carousel走马灯一次轮播(显示)指定张数图片
vue-split-carousel:vue的轮播组件，同时显示多个轮播项目
04-19
Vue拆分轮播 Vue的轮播组件，同时显示多个轮播项目。 2.x作为最新版本仅支持vue 3，vue 2应该使用1.x版本。 浏览器兼容性 现代浏览器，遵循vue 3兼容性。 > 1% last 2 versions not ie 11 not dead 组件结构 在<split>使用<split> ，将自定义内容放入split-carousel-item 。 < split> < split> custom content </ split> < split> custom content2 </ split> </ split> 安装 npm i
VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张
2401_85015200的博客
05-14 244
【代码】VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张。
vue+element-ui carousel走马灯一次轮播(显示)5张图片
qq_38693333的博客
10-19 1993
vue+element-ui carousel走马灯一次轮播(显示)5张图片
Vue之el-carousel走马灯
qq_42453751的博客
04-23 3765
<template> <!--动态将图片轮播图的容器高度设置成与图片一致--> <el-carousel height="260px" trigger="click" :autoplay="false"> <el-carousel-item v-for="item in imagebox" :key="item.id"> <img :src="item.idView" class="image"> &
VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张）
热门推荐
Mickeymouse
05-22 1万+
用过Element Carousel 组件的 应该都知道 ，他只能显示3个item, 而没有提供显示数量设置的属性，那如果想要显示多个，就要来改下他的源码，一起看下吧！ 原本样式： 改动后： 首先在浏览器里先看下他的样式： 首先我们将隐藏的item 显示出来 发现他是这个样子的 我们会发现 他会在左面后者右面有两个item 是重叠的 其实不重叠 直接就可以用啦 哈哈 我们就在这个基础上面改就好了！ 下面来看下代码： 首先carousel组件在element...
vue+elementui Carousel 走马灯 一次轮播4张图片
tc1143481956的博客
08-19 1万+
vue <el-carousel :loop="false" :autoplay="false" height="204px"> <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index"> <img v-for="(imgList,index2) in list" :key="index2" class="top-img" :src="imgLi
（PC端轮播）el-carousel一个轮播里显示多个内容
leng0920的博客
09-08 2303
（PC端轮播）el-carousel一个轮播里显示多个内容
vue改变el-carousel走马灯平铺4张图片
weixin_43258615的博客
01-04 2187
el-carousel多张图片平铺,左右切换效果
vue实现分组轮播（一排放4个小的、无缝滚动、跑马灯效果）
m0_59224033的博客
11-02 4213
纯vue实现分组轮播（一排放5个小的、无缝滚动、跑马灯效果
vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片
weixin_42293937的博客
10-26 1688
【代码】vue+elementui Carousel 走马灯 以四宫格的布局方式一次轮播4张图片。
【element】el-carousel走马灯一个页面放多个元素展示
jieweiwujie的博客
02-10 5812
<template> <div> <el-carousel indicator-position="outside" :autoplay="false"> <el-carousel-item v-for="item in result" :key="item" class="carousel-content" > <div v-for="(el, i...
element 走马灯显示多条数据
F2601775592的博客
03-18 575
直接上代码 我这里显示的是10条 可以根据自己的情况修改。
el-carousel轮播图，一页五条数据，显示几页...
最新发布
weixin_67255581的博客
05-21 370
【代码】el-carousel轮播图，一页五条数据，显示几页...
el-carousel一屏放多个盒子和修改图标
VIVI_CSDN01的博客
07-03 904
el-carousel一屏放多个盒子和修改图标
Ant Design Vue 走马灯 自定义单页展示多张图片，控制每次轮播张数的方法
m0_73008551的博客
12-02 1305
我们可以看到官网给的api是没有这种功能，百度上也多是在css上动刀，那样也就毕竟繁琐了，我们是什么？我们是程序猿啊，程序猿就该有程序猿的样子，怎么能写繁琐的东西呢，那还怎么为公司项目提高效率！
antdvue走马灯一页显示多张图片的效果
xuxiangyu827的博客
04-12 3208
antdvue实现走马灯轮播图一页显示多张图片
Vue使用Element-ui走马灯功能动态改变图片和容器大小
06-09
要使用Element-UI的走马灯（Carousel）功能来动态改变图片和容器大小，可以按照以下步骤进行： 1. 引入Element-UI的Carousel组件和样式文件 ```javascript import { Carousel, CarouselItem } from 'element-ui'; import 'element-ui/lib/theme-chalk/carousel.css'; import 'element-ui/lib/theme-chalk/carousel-item.css'; ``` 2. 在Vue组件中使用Carousel组件，并绑定数据 ```html <template> <div> <el-carousel :height="carouselHeight"> <el-carousel-item v-for="(item, index) in items" :key="index"> <img :src="item.src" /> </el-carousel-item> </el-carousel> </div> </template> <script> export default { data() { return { items: [ { src: 'https://picsum.photos/800/400/?image=1' }, { src: 'https://picsum.photos/800/400/?image=2' }, { src: 'https://picsum.photos/800/400/?image=3' }, ], carouselHeight: 400, }; }, }; </script> ``` 3. 监听窗口大小变化，动态改变容器高度和图片大小 ```html <template> <div> <el-carousel :height="carouselHeight"> <el-carousel-item v-for="(item, index) in items" :key="index"> <img :src="item.src" :style="{ width: imgWidth + 'px', height: imgHeight + 'px' }" /> </el-carousel-item> </el-carousel> </div> </template> <script> export default { data() { return { items: [ { src: 'https://picsum.photos/800/400/?image=1' }, { src: 'https://picsum.photos/800/400/?image=2' }, { src: 'https://picsum.photos/800/400/?image=3' }, ], carouselHeight: 400, imgWidth: 800, imgHeight: 400, }; }, mounted() { this.adjustSize(); window.addEventListener('resize', this.adjustSize); }, beforeDestroy() { window.removeEventListener('resize', this.adjustSize); }, methods: { adjustSize() { const containerWidth = this.$el.clientWidth; const containerHeight = Math.round(containerWidth / 2); const imgWidth = containerWidth; const imgHeight = containerHeight; this.carouselHeight = containerHeight; this.imgWidth = imgWidth; this.imgHeight = imgHeight; }, }, }; </script> ``` 以上代码中，adjustSize方法会在组件挂载后和窗口大小变化时被调用，根据当前容器的宽度来计算容器高度和图片大小，并将结果保存到data中。在模板中，使用动态绑定的方式来设置图片的宽度和高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值