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. [R语言] ggplot2入门笔记2—通用教程ggplot2简介

    文章目录 通用教程简介(Introduction To ggplot2) 2 ggplot2入门笔记2-通用教程ggplot2简介 1. 了解ggplot语法(Understanding the gg ...

  2. （3）go-micro微服务项目搭建

    目录 一 微服务项目介绍 二 go-micro安装 1.拉取micro镜像 2.生成项目目录 三 项目搭建 使用DDD模式开发项目: 四 最后 一 微服务项目介绍 账户功能是每一个系统都绕不开的一部分 ...

  3. 《深度探索C++对象模型》第四章 Function语意学

    member function相对于nonmember function之间不存在效率之间的差别,因为编译器内部已经将"member 函数实体"转化为对等的"nonmem ...

  4. Codeforces Round #845 (Div. 2) and ByteRace 2023 A-D

    Codeforces Round #845 (Div. 2) and ByteRace 2023 A-D A. Everybody Likes Good Arrays! 题意:对给定数组进行操作:删除 ...

  5. 了解 Transformers 是如何“思考”的

    Transformer 模型是 AI 系统的基础.已经有了数不清的关于 "Transformer 如何工作" 的核心结构图表. 但是这些图表没有提供任何直观的计算该模型的框架表示. ...

  6. 12月23日内容总结——csrf跨站请求伪造、校验策略、相关装饰器，auth认证模块及相关操作，拓展auth_user表

    目录 一.csrf跨站请求伪造 概念引入 概念讲解 二.csrf校验策略 概念讲解 form表单操作csrf策略 ajax请求csrf策略 三.csrf相关装饰器 四.auth认证模块 五.auth认 ...

  7. Timer的定时调度函数schedule的四种用法

    schedule的四种用法 schedule(task,time) task-所安排的任务  time-执行任务的时间 作用:在时间等于或者超过time的时候执行且仅执行一次 import java. ...

  8. 使用HtmlAgilityPack 爬取 国家统计局 区划和城乡划分代码

    HtmlAgilityPack:Html解析神器,根据url地址解析html页面内容. 项目引用HtmlAgilityPack.dll文件或者通过安装 nuget 包 HtmlAgilityPack ...

  9. *已解决 Javawe中servlet时出现空白页面，但又网站不报错的问题追溯（编码

    本次随笔内容为在学习过程中遇到问题不断排问题,不断查资料解决的过程,小菜鸟学习~相互交流(菜鸟互啄~) 遇到问题: Javawe中servlet时出现空白页面,但又网站不报错的问题追溯 解决: 1.t ...

  10. fiddler的简单使用

    一.fiddler接口测试介绍 二.fiddler过滤器的使用 fiddler可以指定只抓哪些包,通过filters实现 如果需要抓取多个网站,各个需要抓取的网站之间用分号隔开 三.fiddler抓取 ...