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%',

      },

    };

  },

};

巴特西

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

最新文章

热门文章