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 一次显示多张图片的轮播图的更多相关文章

  1. VUE swiper.js引用使用轮播图

    <template> <div class="home"> <div class="swiper-container"> & ...

  2. vue swiper异步加载轮播图，并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...

  3. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  4. 自定义完美的ViewPager 真正无限循环的轮播图

    网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...

  5. 移动端轮播图vue-awesome-swiper

    日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...

  6. vue-awesome-swiper实现轮播图

    1.首先通过npm安装vue-awesome-swiper,我在项目中用的是2.6.7版本 npm install vue-awesome-swiper@2.6.7 –save 2. 在main.js ...

  7. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  8. Vue实现音乐播放器（七）：轮播图组件（二）

    轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...

  9. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  10. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

随机推荐

  1. Hive详解(01) - 概念

    Hive详解(01) - 概念 hive简介 Hive:由Facebook开源用于解决海量结构化日志的数据统计工具,是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类S ...

  2. Docker搭建Cloudreve网盘

    原文地址: https://blog.laoda.de/archives/docker-compose-install-lighthouse-cloudreve 油管视频: https://www.y ...

  3. 【Redis实战专题】「性能监控系列」全方位探索Redis的性能监控以及优化指南

    Redis基本简介 Redis是一个开源(BSD 许可).内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合等数据类型.内置复制.Lua 脚本. ...

  4. 史上最简单 OpenCV for C++ 在 Windows 和 Ubuntu 上编译安装使用教程

    准备工作 原材料 Ubuntu 系统(非必须,Windows 也可以,主要是 Ubuntu 适合编译) OpenCV 3.4.1 压缩包 OpenCV contrib 3.4.1 压缩包 MinGW( ...

  5. Google Cloud Platform | 使用 Terraform 的分层防火墙策略自动化

    [本文由Cloud Ace整理发布,更多内容请访问Cloud Ace 官网] 防火墙规则是 Google Cloud 中网络安全的重要组成部分.Google Cloud 中的防火墙大致可分为两种类型: ...

  6. Lamdba表达式的无参数无返回值的练习-Lambda表达式有参数有返回值的练习

    Lamdba表达式的无参数无返回值的练习 题目给定一个厨子Cook接口,内含唯一的抽象方法makeFood,且无参数.无返回值.如下∶public interface cook {void makeF ...

  7. Scanner概述-Scanner使用步骤

    Scanner概述 了解了API的使用方式,我们通过Scanner类,熟悉一下查询API,并使用类的步骤. 什么是Scanner类 一个可以解析基本类型和字符串的简单文本扫描器. 例如,以下代码使用户 ...

  8. django框架之drf：04、序列化器常用字段及参数，序列化器高级用法之source、定制字段数据的两种方法、多表关联反序列化的保存、ModelSerializer的使用

    Django框架之drf 目录 Django框架之drf 一.序列化器常用字段及参数 1.常用字段 2.常用字段参数 3.字段参数针对性分类 二.序列化器高级用法之source 1.定制字段名 三.定 ...

  9. Solon v2.0 大版本发布。提效率！降成本！

    一个高效的 Java 应用开发框架:更快.更小.更简单.不是 Spring,没有 Servlet,也无关 JavaEE:新兴独立的开放生态.主框架仅 0.1 MB. 150来个生态插件,覆盖各种不同的 ...

  10. 重学SpringBoot. step5 再学SpringMVC

    SpringMVC 参考:<深入浅出 SpringBoot 2.X> 虽然说的是SpringBoot,但把SpringMVC将的很好,正是SpringMVC应用到SpringBoot中非常 ...