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. [cocos2d-x]关于定时器

    什么是定时器 定时器的作用就是每隔一段时间,就执行一段自定义的动作,比如飞机向前方移动,子弹的移动等等.该函数定义在CCNode头文件中,基本上cocos2dx中所有的东西都能够使用定时器. 定时器的 ...

  2. Hugging News #0106

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  3. Python自动批量修改文件名称的方法

      本文介绍基于Python语言,按照一定命名规则批量修改多个文件的文件名的方法.   已知现有一个文件夹,其中包括班级所有同学上交的作业文件,每人一份:所有作业文件命名格式统一,都是地信1701_姓 ...

  4. Ubuntu玩机记录，让我破电脑又飞起来了

    写在前面 很早之前的电脑ThinkPad E440,一直没怎么用.最近整理了一下电脑的资料,全部备份到云盘.整理的过程感觉电脑很慢很慢,难受极了.整理完后,终于我要对它下手了! 我制作了启动U盘,把U ...

  5. RabbitMQ消息队列入门及解决常见问题

    RabbitMQ消息队列 同步通讯和异步通讯 微服务间通讯有同步和异步两种方式: 同步通讯:就像打电话,需要实时响应. 异步通讯:就像发邮件,不需要马上回复. 两种方式各有优劣,打电话可以立即得到响应 ...

  6. XYplorer使用教程

    XYplorer使用教程 XYplorer是Windows的文件管理器.它具有标签式浏览,强大的文件搜索功能,多功能预览,高度可定制的界面,可选的双窗格以及一系列独特的方法,可以有效地自动执行频繁重复 ...

  7. ECharts 饼图指定颜色显示

    一.通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color:调色盘颜色列表.如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色. 默认为: ['#5 ...

  8. javaEE（多线程、线程通信、线程安全、线程池、线程池工具）

    多线程 多线程的创建 Thread类的方法 线程安全.线程同步 线程通信.线程池 定时器.线程状态.. Thread类 java是通过java.lang.Thread类来代表线程的 按照面向对象的思想 ...

  9. TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 ——诊断和控制 IP 协议层

    TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 --诊断和控制 IP 协议层 关于网际控制报文协议(Internet Control M ...

  10. php中 mysql 中文乱码解决办法

     首先要保证是utf-8编码或者支持中文的编码 2.Windows下修改方法 MySQL安装目录下的my-default.ini改为my.ini文件 [client]节点 default-charac ...