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,
            },
          });
        }
    }
}