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

黛玉戴玉逮鱼

已于 2022-09-23 16:51:12 修改

阅读量1.9k

点赞数

分类专栏： Vue 文章标签：前端 vue.js

于 2022-09-23 16:49:13 首次发布

本文链接：https://blog.csdn.net/weixin_44730335/article/details/127013615

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、在Vue2中安装及使用Swiper

1. 安装swiper

npm install swiper@4.5.1 --save-dev

2. 在main.js中引入

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

二、实现代码

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

<template>
    <!-- 轮播图 -->
    <div class="swiper" id="swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in bookSwiper" :key="index">
          <img :src="item.img" class="bookImg" />
        </div>
      </div>
    </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  name: "HomeView",
  data() {
    return {
      bookSwiper: [
        {
          img: "http://img.test.o2ting.com/ProductImages/2018/-0/20180206155502_726R.jpg_355x473.jpg",
          cntname: "错嫁良缘之一代军师",
        },
        {
          img: "http://iread.wo.com.cn/res/images/cover/lhsz/1491552645683/stream/smlf/image/cover.jpg",
          cntname: "鬼墓迷灯",
        },
        {
          img: "http://pic.qingting.fm/2017/0228/20170228173809513.jpg!medium",
          cntname: "九霄灵帝",
        },
      ],
    };
  },
  mounted() {
    new Swiper("#swiper1", {
      direction: "horizontal",
      speed: 600,
      loop: true,
      autoplay: false,
      observer: true,
      observeParents: true,
      effect: "coverflow",
      slidesPerView: "auto",
      centeredSlides: true,
      coverflowEffect: {
        rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
        stretch: -5, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
        depth: 20, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
        modifier: 5,
        slideShadows: false, //开启slide阴影。默认 true。
      },
    });
  },
};
</script>

  // 轮播图
  .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;
    }
  }