vue+Vue-Awesome-Swiper實現移動端輪播效果

效果圖

在這裏插入圖片描述
在這裏插入圖片描述

預覽地址

https://sxs1995.github.io/vueSwiper/dist/index.html#/

代碼

<!--
 * @Author: shenxsh
 * @Date: 2019-05-31 10:21:03
 * @LastEditTime: 2019-05-31 11:44:06
 * @LastEditors: Do not edit
 * @Description: 常用的swiper移動端效果
 -->
<template>
  <div class="home">
    <h3>1.中間顯示完整,兩邊少量顯示</h3>
    <swiper :options="option1">
      <swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
        <div class="box">item{{index}}</div>
      </swiper-slide>
    </swiper>
    <h3>2.左側顯示完整,右側少量顯示</h3>
    <swiper :options="option2">
      <swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
        <div class="box">item{{index}}</div>
      </swiper-slide>
    </swiper>
    <h3>3.中間突出顯示,兩邊縮放</h3>
    <div class="option3">
      <swiper :options="option3">
        <swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index">
          <div class="box">item{{index}}</div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    let _this = this;
    return {
      option1: {
        slidesPerView: 1.18, //顯示slide的數量
        centeredSlides: true, //居中顯示
        loop: true, //循環
        initialSlide: 1, //初始索引
        spaceBetween: 15, //間距
        on: {
          click: function() {
            // 獲取點擊的索引.
            const realIndex = this.realIndex;
            // 此處可自定義點擊事件,注意此處this指向swiper,定義_this
          }
        }
      },
      option2: {
        slidesPerView: 2.15,
        spaceBetween: 15
        // slidesOffsetBefore: -1 //左偏移
      },
      option3: {
        slidesPerView: 1.49,
        centeredSlides: true,
        loop: true,
        touchRatio: 1, //觸摸距離與slide滑動距離的比率。
        spaceBetween: 0
      }
    };
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  padding-bottom: 40px;
  .box {
    background: red;
    height: 200px;
    color: #fff;
    line-height: 200px;
    text-align: center;
    font-size: 24px;
  }
}
.option3 {
  .box {
    height: 300px;
  }
  .swiper-slide:not(.swiper-slide-active) {
    transition: 400ms;
    transform: scale(0.85);
  }
}
</style>

第三個需要css控制

.option3 {
  .box {
    height: 300px;
  }
  .swiper-slide:not(.swiper-slide-active) {
    transition: 400ms;
    transform: scale(0.85);
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章