vue 一次显示多张图片的轮播图

1. npm i vue-slick-carousel
<template>
  <div>
    <div class="activities ">
      <VueSlickCarousel v-bind="settings">
        <div class="activity">
         
          <!-- 动态图片 -->
          <router-link to="/greekBudget">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/activity01.jpeg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("home.t36") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("home.t37") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("home.t44") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/EUCouncil">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/activity02.webp" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("EU.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("EU.t2") }}
            </article>

            <div class="meta">
              <p class="date-published"><i class="far fa-calendar"></i></p>
            </div>
          </div>
       
        </router-link>
      </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/logistics">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/activity04.png" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("logistics.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("logistics.t2") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("logistics.t3") }}
              </p>
            </div>
           
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/SETE">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/activity03.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("SETE.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("SETE.t2") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i>{{ $t("SETE.t3") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/hellenistical">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img
              src="@/assets/images/hellenistical.jpeg"
              class="imgCss"
              alt=""
            />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("hellenistical.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("hellenistical.t2") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("hellenistical.t3") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/economic">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/economic2.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("economic.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("economic.t3") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("economic.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/femalePresident">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img
              src="@/assets/images/femalePresident1.jpg"
              class="imgCss"
              alt=""
            />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("femalePresident.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("femalePresident.t3") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i>{{ $t("femalePresident.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/port">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/port1.png" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("port.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("port.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("port.t3") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/VisaIncrease">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img
              src="@/assets/images/VisaIncrease.jpeg"
              class="imgCss"
              alt=""
            />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("VisaIncrease.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("VisaIncrease.t2") }}
            </article>

            <div class="meta">
              <p class="date-published"><i class="far fa-calendar"></i></p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/DebtRelief">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/DebtRelief.jpeg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("DebtRelief.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("DebtRelief.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("DebtRelief.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/agreement">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/agreement1.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("agreement.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("agreement.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("agreement.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/Shanghai">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/Shanghai1.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("Shanghai.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("Shanghai.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("Shanghai.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/cooperation">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/cooperation1.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("cooperation.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("cooperation.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("cooperation.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/VisitGreece">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/VisitGreece1.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("VisitGreece.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("VisitGreece.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i>{{ $t("VisitGreece.t2") }}
              </p>
            </div>
          </div>
        </router-link>
        </div>
        <div class="activity">
          <!-- 动态图片 -->
          <router-link to="/SouthEurope">
          <div class="act-image-wrapper">
            <div class="img-shadow"></div>
            <img src="@/assets/images/SouthEurope1.jpg" class="imgCss" alt="" />
          </div>
          <!-- 动态元数据，包括发表日期和评论数量 -->
          <div class="activity-content">
            <!-- 动态标题 -->
            <h2 class="act-title">
              {{ $t("SouthEurope.t1") }}
            </h2>
            <!-- 动态内容摘要 -->
            <article>
              {{ $t("SouthEurope.t4") }}
            </article>

            <div class="meta">
              <p class="date-published">
                <i class="far fa-calendar"></i> {{ $t("SouthEurope.t2") }}
              </p>
            </div>
          </div>
          </router-link>
        </div>
      </VueSlickCarousel>
    </div>
  </div>
</template>

.activity {
  margin-top: 150px;
  transition: 0.4s;
  width: 18%;
  background: #f4f6fa;
  overflow: hidden;
  /* 动态图片容器 */
  .act-image-wrapper {
    height: auto;
    width: 100%;
    overflow: hidden;
    /* 抵消activity的padding */
    margin-bottom: 0;
    position: relative;
    .img-shadow {
      z-index: 2;
      position: absolute;
      top: 0px;
      width: 100%;
      height: 100%;
      min-height: 300px;
      background: #030d37;
      opacity: 0.7;
    }
    .imgCss {
      width: 100%;
      height: 300px;
      min-height: 300px;
      object-fit: cover;
    }
  }
  .activity-content {
    width: 89%;
    height: 280px;
    margin: 0 auto;
    /* 动态标题 */
    .act-title {
      text-align: left;
      width: 100%;
      height: 68px;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #273056;
      line-height: 34px;
      letter-spacing: 1px;
      margin-top: 22px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* 动态摘要 */
    article {
      width: 100%;
      height: 112px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #8086a0;
      line-height: 28px;
      text-align: initial;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }
    .meta {
      width: 100%;
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #8086a0;
      line-height: 28px;
      margin-top: 20px;
      text-align: initial;
    }
  }
}
/* 动态鼠标移上时 */
.activity:hover {
  //     transform: translateY(-20px) scale(1.05);
  //     box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.1);
  background: #030d37;

  .img-shadow {
    display: none;
  }
  .act-title {
    color: #ffffff;
  }
  article {
    color: #b3bada;
  }
  .meta {
    color: #b3bada;
  }
}
/deep/.slick-prev {
  left: 5px;
}
/deep/ .slick-next {
    right: 5px;
}
/deep/.slick-prev,
/deep/.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 999;
}

import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";

export default {
  name: "Slider",
  components: { VueSlickCarousel },
  data() {
    return {
      settings: {
        loop: true,
        dots: true,
        infinite: true,
        rows: 1,
        autoplay: true,
        initialSlide: 2,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 4,
        swipeToSlide: true,
        arrows: true,
        itemWidth:'23%',
      },
    };
  },
};