el-carousel走马灯效果

image.png

• 代码

  <div class="image-main">
      <div class="message-box">
        <el-carousel
          ref="carousel"
          @change="handleCarouselChange"
          :interval="4000"
          :hover-stop="true"
          arrow="never"
          :loop="true"
          height="480px"
        >
          <el-carousel-item v-for="each in bottomIconList">
            <div class="slide-boxes">
              <div
                class="card-1"
                v-for="item in each.list"
              >
                <img
                  :src="require('@/assets/images/' + item.src)"
                  alt=""
                />
                <div class="slide-boxes-title">
                  <i class="slide-boxes-subtitle-dit"></i>
                  <div class="slide-boxes-title-text">
                    洛杉矶发生就发生
                  </div>
                </div>
                <div class="slide-boxes-subtitle">
                  发动机手机发的啦
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div class="carousel-arrow left-arrow" @click="prevSlide">
          <img :src="leftArrow" alt="left arrow" />
        </div>
        <div class="carousel-arrow right-arrow" @click="nextSlide">
          <img :src="rightArrow" alt="left arrow" />
        </div>
      </div>
    </div>

      leftArrow: require("@/assets/images/detail-carousel-arrow-left-gray.png"),
      rightArrow: require("@/assets/images/detail-carousel-arrow-right.png"),
 bottomIconList: [
{
 list:[
        { src: "bottom3.png" },
        {
          src: "bottom2.png",
        },
        {
          src: "bottom1.png",
        },
 ]
},
{
 list:[
        { src: "bottom3.png" },
        {
          src: "bottom2.png",
        },
        {
          src: "bottom1.png",
        },
 ]
},
{
 list:[
        { src: "bottom3.png" },
        {
          src: "bottom2.png",
        },
        {
          src: "bottom1.png",
        },
 ]
},
],
  handleCarouselChange(currentIndex) {
      this.leftArrow =
        currentIndex === 0
          ? require("@/assets/images/detail-carousel-arrow-left-gray.png")
          : require("@/assets/images/detail-carousel-arrow-left.png");
      this.rightArrow =
        currentIndex === this.bottomIconList.length - 1
          ? require("@/assets/images/detail-carousel-arrow-right-gray.png")
          : require("@/assets/images/detail-carousel-arrow-right.png");
    },
 nextSlide() {
      this.$refs.carousel.next();
    },
    prevSlide() {
      this.$refs.carousel.prev();
    },

//card
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.left-arrow {
  left: -110px;
}

.right-arrow {
  right: -110px;
}
.image-main {
  margin: 0 auto 10px auto;
  width: 80%;
}

.message-box {
  display: flex;
  flex-direction: column;
  max-width: 1520px;
  position: relative;
  height: auto;
}

.slide-boxes {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}
.slide-boxes .card-1 {
  cursor: pointer;
  width: calc(100% / 3 - 20px);
  padding: 0 0 30px 0;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  height: 440px;
  display: flex;
  flex-direction: column;
}
.slide-boxes .card-1 .slide-boxes-subtitle-dit {
  display: block;
  background: #1382fc;
  border-radius: 3px;
  width: 8px;
  height: 20px;
  margin: 0 11px 0 0px;
}
.slide-boxes .card-1 img {
  border-radius: 10px 10px 0 0;
  height: 240px;
}
.slide-boxes-title {
  padding: 27px 20px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #f4f8ff, #e8f2ff);
  font-weight: 500;
  font-size: 26px;
  color: #000000;
}
.slide-boxes-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slide-boxes-subtitle {
  font-weight: 500;
  font-size: 20px;
  color: #9ea7aa;
  line-height: 30px;
  margin: 20px 20px 0px 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里的3表示最多显示3行 */
  overflow: hidden;
  text-overflow: ellipsis;
}