vue2.0的swiper轮播展示

背景

需要一个类似于走马灯一样效果的轮播图，但是可以呈现同一个版图出现多个并列的容器，并且可以实现自动轮播，呈现效果如下：

安装swiper

vue2.0推荐使用的swiper的版本是5.4.5,但是我使用之后应该是引入的css文件没有与之配套，导致分页器没有展示，更换版本为3.4.1之后会显示
注：确保在使用 Swiper 时，Swiper 的版本与 vue-awesome-swiper 的版本相匹配，以避免兼容性问题,建议使用 Swiper 3.4.1 版本

npm install swiper@3.4.1 vue-awesome-swiper --save

引入

在页面中引入swiper

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

注意：此时若是报错，找不到某个组件之类的，就是swiper版本不对，引入swiper.css的时候需要找到确切的位置，可以尝试从网上找到几个较为常见的引入的写法，例如：import ‘swiper/css/swiper.css’ 之类的。

data

在 data 函数中返回 Swiper 的配置对象：

data() {
    return {
      swiper:null,
      }
 }

配置swiper

比较常见的swiper配置如下：

• slidesPerView：设置同时显示的slides数量。
• spaceBetween：设置slides之间的间距。
• direction：设置Slides的滑动方向，可以是horizontal（水平）或vertical（垂直），默认为horizontal。
• loop：设置为true时，可以无限循环轮播，默认为false。
• Autoplay：autoplay：设置为true或对象来开启自动播放，可以设置delay（延迟时间，单位ms）和disableOnInteraction（用户交互后是否停止autoplay）等选项；autoplayStopOnLastSlide：设置为true时，当切换到最后一个slide时停止自动切换，默认为false。
• pagination：pagination：设置为.swiper-pagination时，显示分页器；paginationClickable：设置为true时，可以通过点击分页器来切换轮播图，默认为false。
• simulateTouch：设置为true时，桌面端也支持触摸滑动效果，默认为true。

 mounted() {
    this.updateModel();
    this.initSwiper();
    },
beforeDestroy() {
    // 移除事件监听器
    if (this.swiper) {
      this.swiper.destroy();
      this.swiper = null;
    }
  },
  methods: {
      initSwiper() {
      // 确保 swiper-container 已经被渲染
      this.$nextTick(() => {
        this.swiper = new Swiper(".swiper-container0", {
          // autoplay: {
          //   delay:3000,
          //   stopOnLastSlide:false,
          //   disableOnInteraction:false,
          // },
          slidesPerView: 1.1,
          spaceBetween: 10,
          loop: false,
          // 控制循环
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: 'bullets',
          },
        });
        
      });
    },
}

页面

swiper中是根据swiper-slide作为一屏分割开的容器，所以我们可以把单独每个屏幕的div放入slide中，定义slide中div样式

     <div class="swiper-container0">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="grand1" style="position: relative;height: fit-content">
                      <div class="back">
                        <div class="photo">
                          <img src="@/assets/information.png">
                        </div>
                      </div>
                      <div class="back1">
                        <div class="title1">Oil & Gas Information</div>
                        <div class="title2" >
                          MORE<i style="margin-left: 5px" class="el-icon-arrow-right"></i>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide" >
                    <!--        <img src="@a/Q.jpeg" alt="图片2" />-->
                    <div class="grand1" style="position: relative;height: fit-content">
                      <div class="back">
                        <div class="photo">
                          <img src="@/assets/expo.png">
                        </div>
                      </div>
                      <div class="back1">
                        <div class="title1"> Oil & Gas Exposition</div>
                        <div class="title2">
                          MORE<i style="margin-left: 5px" class="el-icon-arrow-right"></i>

                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <!--        <img src="@a/Q.jpeg" alt="图片2" />-->
                    <div class="grand1" style="position: relative;height: fit-content">
                      <div class="back">
                        <div class="photo">
                          <img src="@/assets/job.png">
                        </div>
                      </div>
                      <div class="back1">
                        <div class="title1"> Oil & Gas JobAI</div>
                        <div class="title2">
                          MORE<i style="margin-left: 5px" class="el-icon-arrow-right"></i>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-pagination"></div>
              </div>

样式

由于是在移动端进行修改，用media进行控制样式。
注意：为了避免swiper的样式在less中不起作用，可以直接在style标签下重写swiper分页器的css，重新定义分页器的位置和颜色。

• 组件中的分页器position都是absolute，这样就会出现swiper的分页器出现在第一屏的下方，样式出现混乱，所以我们将position修改为relative；
• 由于想要一个扁扁的分页器，而不是圆形的，修改swiper-pagination-bullet样式，定义width、height、border-radius；
• 到达某个分页时的bullet样式在swiper-pagination-bullet-active中，可以在其中修改其颜色；

<style>
@media screen and (max-width: 757px) {
 
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
    margin-top: 0 !important;
  }

  .swiper-pagination {
    position: relative;
  }

  .swiper-pagination-bullet {
    width: 25px;
    height: 5px !important;
    border-radius: 9px;
  }

  .swiper-pagination-bullet-active {
    background-color: rgb(47, 110, 255);
  }

}
</style>

内部div容器的样式：

    .pro2 {
      height: fit-content;
      width: 100%;
      //z-index: 89156;

      .grand1 {
        cursor: pointer;
        width: 100%;
        border-radius: 6px;
        padding: 0.98887515451174vh 0 0 0;
        opacity: 1;
        position: relative;

        .back {
          width: 100%;
          height:200px;
          //background: #ffffff linear-gradient(to right, #cfe1ff 0%, #f0f6ff 100%);
          background-color: white;
          box-shadow: 5px 0 14px 0 #d4e4ff;
          border-radius: 9px;
          border: white 2px solid;
          margin-top: 5px;
          // border-radius:6px;
          // display: flex;
        }

        .back1 {
          bottom: 0;
          position: absolute;
          width: 100%;
          color: white;
          height: fit-content;
          background:linear-gradient( to top ,rgba(54, 64, 73, 0.9) 0%,  rgba(54, 64, 73, 0.4) 50%,transparent 100%);
          box-shadow: 5px 0 14px 0 #d4e4ff;
          border: white 2px solid;
          border-top: none;
          border-bottom-right-radius: 9px;
          border-bottom-left-radius: 9px;
          // border-radius:6px;
          display: flex;
          padding: 10px 15px;
          justify-content: space-between;
        }

        .photo {
          //background-image: url("../assets/pro1.jpg");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-color: transparent; /* 这里设置背景颜色为透明 */
          opacity: 1.25;
          width: 100%;
          border-radius: 9px;
          height: 200px;
        }

        .title1 {
          text-align: left;
          font-size: 16px;
          font-family: Roboto, sans-serif;
          font-weight: bold;
          color: white;
          text-overflow: ellipsis;
          width: 60vw;
          overflow: hidden;
          height: fit-content;
          white-space: nowrap;
          //line-height: 35px;
        }

        .title2 {
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 4;
          //width: 100%;
          height: 100%;
          // text-align: justify;
          font-size: 12px;
          font-family: Roboto, sans-serif;
          font-weight: 500;
          margin:auto 0;
          //color: #2168DB;
          //line-height: 35px;
        }
      }

    }

这样就实现啦！其他为了美观，添加圆角、背景之类的样式就可以随便写！