vue2移动端+swiper 实现异形的slide

目录

一、在Vue2中安装及使用Swiper

二、实现代码

三、实现效果

四、参考

---

一、在Vue2中安装及使用Swiper

1. 安装swiper

npm install [email protected] --save-dev

2. 在main.js中引入

import 'swiper/dist/css/swiper.min.css';
import 'swiper/dist/js/swiper.min';

二、实现代码

以下分别是html、数据+swiper设置、样式的代码：

  // 轮播图
  .swiper {
    width: 100%;
    margin-bottom: 20px;

    .swiper-slide {
      width: 335px !important;
      height: 120px;
      font-size: 14px;
      text-align: center;
      line-height: 80px;
      border-radius: 8px;
      position: relative;
    }

    .bookImg {
      width: 335px !important;
      height: 120px;
      border-radius: 8px;
    }
  }

三、实现效果

1. 效果图如下：

2. 效果类似：Swiper演示中的“实现异形的slide”。

四、参考

vue使用异形swiper_书信成鸽1208的博客-CSDN博客_异形swiper

https://www.jianshu.com/p/ebfec766a99e

Swiper演示 - Swiper中文网