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. [编程基础] Python列表解析总结

    在本教程中,我们将学习使用Python列表解析(list comprehensions)相关知识 1 使用介绍 列表解析是一种基于现有列表创建列表的句法结构.列表解析提供了创建列表的简洁方法.通常需要 ...

  2. [机器学习] Yellowbrick使用笔记4-目标可视化

    目标可视化工具专门用于直观地描述用于监督建模的因变量,通常称为y目标. 代码下载 当前实现了以下可视化: 平衡箱可视化Balanced Binning:生成带有垂直线的直方图,垂直线显示推荐值点,以将 ...

  3. .net core操作MongoDB

    前言 现实中认识的一个搞java(百万富婆)的大佬,已经转行做抖音主播了,搞技术的只能赶在年前再水一篇博客,不足之处欢迎拍砖,以免误人子弟,呔,真是太难受了 环境准备 .net core 3.1 Mo ...

  4. Java中Elasticsearch 实现分页方式(三种方式)

    目录 ES 简介 ES 的特点: 一.from + size 浅分页 二.scroll 深分页 scroll删除 三.search_after 深分页 ES 简介 Elasticsearch 是一个基 ...

  5. 如何理解scanf（“%d %d”，a，b）==2和scanf（“%d”，a）=1【摘抄笔记ψ(._. )>】

    scanf 函数有一个返回值,0表示接受输入失败,1表示接受输入成功. while(scanf("%d",&x)==1) 的意思就是: 当接收输入变量x的值成功的时候,继续 ...

  6. drf基础：1、web应用模式、API接口、接口测试工具

    drf入门 一.web应用模式 ​ web的应用模式共分为两种,前后端不分离.前后端分离 1.前后端混合 ​ 之前所写的bbs项目就是前后端不分离,后端人员在开发过程中使用模板语法,前后端都由一个人员 ...

  7. Unity_UIWidgets - 按钮组件IconButton

    Unity_UIWidgets - 按钮组件IconButton 按钮组件IconButton IconButton 结尾 QQ 今日无推荐 按钮组件IconButton 既然上周给大家介绍了ICON ...

  8. Argus 与其他（非Oracle B2B）EDI 工具的集成

    Argus 是Oracle 的产品,它自然推荐使用Oracle 自己的EDI 系统,这个系统就是Oracle B2B.但是Argus 留有与其他EDI 工具的集成空间,即即使不使用Oracle B2B ...

  9. 【学习笔记】QT从入门到实战完整版（按钮和信号槽）（1）

    介绍说明 学习 QT 的目的只是为了可以实现跨平台的具有GUI 的程序,以前用的 MFC,但是无法应用在嵌入式平台.后来在全志的 Tina 系统中有看到 QT ,因此特地去了解了QT,挺有意思的,UI ...

  10. Python修改柱状图边缘柱子与图边界的距离

      本文介绍基于Python中matplotlib.pyplot模块,修改柱状图.条形图最两侧的柱子与图像边缘之间距离的方法.   最近,绘制了一个水平的柱状图,但是发现图的上.下边距(不是柱子与柱子 ...