vue2移動端+swiper實現(xiàn)異形的slide方式

更新時間：2024年03月22日 17:05:34 作者：黛玉戴玉逮魚

這篇文章主要介紹了vue2移動端+swiper實現(xiàn)異形的slide方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

在Vue2中安裝及使用Swiper

安裝swiper

npm install swiper@4.5.1 --save-dev

在main.js中引入

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

實現(xiàn)代碼

以下分別是html、數(shù)據(jù)+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;
    }
  }