官網效果圖是這樣的

一、我們需要在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