vue使用Swiper插件实现卡片化轮播图

swiper轮播图滚动

1.安装swiper

官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

**注意:**下载插件【要@5.x】,不然会出现各种BUG。

npm i swiper@5.x vue-awesome-swiper@4.1.1 -S

2.HTML代码

html 复制代码
<div class="examples">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(item, index) in clist"
        :key="index"
       >
         <img :src="item.imgUrl" alt="" />
      </div>
    </div>
  </div>
</div>

3.JS代码

html 复制代码
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  data () {
    return {
      clist: [
        {
          imgUrl: require('/src/assets/images/certify01.png')
        },
        {
          imgUrl: require('/src/assets/images/certify02.png')
        },
        {
          imgUrl: require('/src/assets/images/certify03.png')
        }
      ],
    }
  },
  mounted() {
    this.firingSwiper()
  },
  methods:{
   // 启动Swiper(轮播图)
    firingSwiper() {
      new Swiper(".swiper-container", {
        direction: "horizontal", //滑动方向,可设置水平(horizontal)或垂直(vertical)。
        loop: true, // 设置为true 则开启loop模式  衔接滑动
        // 自动滑动
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false, // 如果设置为true,当切换到最后一个slide时停止自动切换。
          disableOnInteraction: false // 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay
        },
        effect: "coverflow", // 切换效果 "coverflow"(3d流)
        slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto
        centeredSlides: true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
        spaceBetween: 10, // 在slide之间设置距离(单位px)。
        slideToClickedSlide: true, // 设置为true则点击slide会过渡到这个slide。
        // loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
        coverflowEffect: {
          rotate: 0, // slide做3d旋转时Y轴的旋转角度
          stretch: 0, // 每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
          depth: 60, // slide的位置深度。值越大z轴距离越远,看起来越小。
          modifier: 5, // depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
          slideShadows: true // 是否开启slide阴影
        }
      });
    },
  }
}
</script>

4.css代码

html 复制代码
<style>
// 自定义轮播图
.examples {
  margin-top: 0.6rem;
  overflow: auto;
}
.swiper-container {
  width: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
  width: 206px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.swiper-container .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 256px;
  border-radius: 12px;
}
</style>
相关推荐
生椰拿铁You2 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生13 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap28 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish36 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520312 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记2 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html