vue 使用swiper的异形轮播图

 

 

 官网效果图是这样的

一、我们需要在vue的public的html引入我们下载的css样式

 <link rel="stylesheet" href="../src/assets/css/swiper.min.css">

这个样式可以去官网下载

https://www.swiper.com.cn/demo/index.html

 下载全部实例里就有我们需要的样式

二、在npm里下载swiper插件

npm install swiper --save-dev

三、在需要使用的页面引入

import Swiper from "swiper";

export default {
    data() {
        return {
        }
    },
    mounted() {

　　　　　　var mySwiper = new Swiper(".swiper-container", {

      　　direction: "horizontal",

      　　loop: true,

      　　centeredSlides: true,

      　　spaceBetween: 10,

      　　observer: true,

      　　observeParents: true,

      　　// slidesPerView: 3,

      　　pagination: {

        　　el: ".swiper-pagination",

        　　clickable: true,

      　　},

    　　});

  }
}

四、写入dom结构

<!-- 异形轮播图 star-->
    <div class="slideshow">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div v-for="(item, i) in pictures" :key="i" class="swiper-slide">
            <!-- 具体内容 -->
            <div class="slideshowtext">{{ item.text }}</div>
            <img :src="item.advertiseImages" alt="商品图片" />
          </div>
        </div>
      </div>
    </div>
<!-- 异形轮播图 end-->

 

五、在mode的data里添加数组对象

 //海报模型展示
      pictures: [
        {
          advertiseImages: require("../assets/image/swiper.png"),
          text: "海报名称一",
        },
        {
          advertiseImages: require("../assets/image/swiper.png"),
          text: "海报名称二",
        },
        {
          advertiseImages: require("../assets/image/swiper.png"),
          text: "海报名称三",
        },
      ],

六、复制swiper官网异形轮播图的样式，这里我按照自己的页面需要进行了更改

//异形轮播图 star
  .slideshow {
    width: 100%;
    overflow: hidden;
    margin-top: 0.63rem;
  }
  .slideshowtext {
    width: 100%;
    text-align: left;
    font-size: 0.28rem;
    color: #333333;
    padding-bottom: 0.21rem;
  }
  .swiper-container {
    width: 4.84rem;
    // height: 7.52rem;
    margin-left: 1.34rem;
  }
  .swiper-wrapper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100%;
    height: 100%;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
  }
  img {
    width: 4.84rem;
    height: 7.52rem;
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
  }
  //异形轮播图 end

 七、如果想获取当前选中的轮播的下标 (需要swiper4.0.0以上版本，在package.json里面查看)

　　在需要的点击方法上获取 要看loop是否为true 

　　1、loop：true    

　　this.mySwiper.activeIndex

　　2、loop:false  

 　　this.mySwiper.realIndex

八、如果使用的图片是从后台获取到的，这么写会出现问题，我们需要把new Swiper放到一个事件里，先把从后台获取的数据放到数据里，然后再调用其new swiper事件

import Swiper from "swiper";

export default {
    data() {
        return {
            mySwiper: null,
            pictures:[]
        }
    },
    methods: {
        dataimg() {
            promise.then(res => {
                this.pictures = res.pictures;
                this.$nextTick(() => {
                    this.dataCarousel();
                });
            });
        },
        dataCarousel() {
          this.mySwiper = new Swiper(".swiper-container", {
            direction: "horizontal",
            loop: true, //是否开始无限循环
            centeredSlides: true,
            spaceBetween: 10,
            observer: true,
            observeParents: true,
            // slidesPerView: 1,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        }
    }
}