vue+element-ui carousel走马灯一次轮播(显示)5张图片_element-plus 走马灯实现单页多张图片轮播

效果:

子组件定义

HTML

<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>

JS

<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
    }
  },
  created () {
    this.$parent && this.$parent.updateItems()
  },
 
  destroyed () {
    this.$parent && this.$parent.updateItems()
  },
 
  methods: {
    processIndex (index, activeIndex) {
      // console.log('activeIndex', activeIndex, index)
      // console.log('index', index)
      if (activeIndex == 0) {
        return index == 1 ? 1 : index == 2 ? 2 : index == 3 ? -2 : index == 4 ? -1 : 0
      }
      if (activeIndex == 1) {
        return index == 2 ? 1 : index == 3 ? 2 : index == 4 ? -2 : index == 0 ? -1 : 0
      }
      if (activeIndex == 2) {
        return index == 3 ? 1 : index == 4 ? 2 : index == 0 ? -2 : index == 1 ? -1 : 0
      }
      if (activeIndex == 3) {
        return index == 4 ? 1 : index == 0 ? 2 : index == 1 ? -2 : index == 2 ? -1 : 0
      }
      if (activeIndex == 4) {
        return index == 0 ? 1 : index == 1 ? 2 : index == 2 ? -2 : index == 3 ? -1 : 0
      }
    },
 
    calcCardTranslate (index) {
      return index * 180 + 320
    },
 
    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.76 : 0.62
      } 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})`
      // console.log('转换类型', translateType)
      // console.log('偏移', this.translate)
      // console.log('大小', this.scale)
      const style = {
        transform: value
      }
      return autoprefixer(style)
    }
  }
}
</script>

CSS

<style scoped>
.el-carousel__arrow--left {
  left: -14px !important;
}
.el-carousel__arrow--right {
  right: -18px !important;
}
.el-carousel__item {
  cursor: pointer;
  z-index: 1;
}
.el-carousel__item--card.is-in-stage {
  z-index: 2;
}
.el-carousel__item--card.is-active {
  z-index: 3;
}
.specialIndex {
  z-index: 0;
}
</style>

父组件中使用

HTML

<template>
  <div class="a0013-container">
    <div class="a0013-con bgcolor">
      <div class="a0013-tit">
        <img src="./default/tit.png" alt="" />
      </div>
      <div class="a0013-swiper">
        <el-carousel
          :interval="3000"
          type="card"
          height="320px"
          style="overflow-x: unset"
        >
          <Swiper v-for="(item, i) in dataList" :key="i">
            <div class="imgBox">
              <img class="imgItem" :src="item.photo.thumb" alt="" srcset="" />
              <div class="imgTit">{{ item.title }}</div>
            </div>
          </Swiper>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

JS

<script>
import { postCms } from "@/utils/http"
 
import Swiper from "./component/swiper.vue"
export default {
  name: "A0013", // 轮播图(5个)
  components: {
    Swiper
  },
  data () {
    return {
      dataList: [], // 专题数据列表
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      try {
        var params = {
          cardgroups: "Page13213213213",
          paging: { page_size: 1000, page_no: 1, last_id: "" },
        }
        postCms("/mobileinf/cardgroups", params)
          .then((res) => {
            res.cardgroups.forEach((item) => {
              this.dataList = item.cards
            })
          }).catch(err => console.log(err))
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

CSS

<style lang="less" scoped>
/deep/.el-carousel__arrow--left {
  left: -14px !important;
}
/deep/.el-carousel__arrow--right {
  right: -16px !important;
}
.a0013-container {
  width: 100%;
  .a0013-con {
    margin: 0 auto;
    width: 1200px;
    padding-bottom: 50px;
    .a0013-tit {
      width: 240px;
      margin-bottom: 30px;
      img {
        width: 240px;
      }
    }
    .a0013-swiper {
      width: 1200px;
      height: 100%;
      .el-carousel__item {
        width: 560px;
        padding: 10px;
        background-color: #f1f6fe;
        box-sizing: border-box;
      }
      .imgBox {
        position: relative;
        .imgItem {
          width: 540px;
          text-align: center;
          height: 300px;
          background-size: cover;
        }
        .imgTit {
          position: absolute;
          top: calc(50% - 36px);
          left: calc(50% - 138px);
          width: 276px;
          height: 72px;
          background: rgba(251, 251, 251, 0.55);
          border: 1px solid #fbfbfb;
          box-shadow: 0px 3px 28px 0px rgba(120, 129, 150, 0.3);
          border-radius: 5px;
          font-size: 43px;
          font-family: zihun100hao;
          font-weight: 600;
          color: #283147;
          line-height: 72px;
        }
      }
    }
  }
}
</style>

因为elemengt-ui没有修改一次显示多个的属性, 找了好久找到一篇修改为一次显示6张的文章,且只有子组件没有父组件使用的代码。在此基础上进行修改进行使用，在此记录下来，方便以后使用。有兴趣的可以去原文章研究下。

参考文章：VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张）_Mickey_于浩的博客-CSDN博客_elementui走马灯卡片显示多个