vue swiper点击切换slide

目录

• • 前言
  • 效果
  • 代码

前言

• 做轮播挑选了很久最终选择用swiper
• 我用的是swiper 5.4.5，听说新版本对vue2支持不好。
• 找到一个很活跃的库vue-awesome-swiper，但是居然宣布过时了。
  
• 也是踩了很多坑，最终在https://www.swiper.com.cn/demo/index.html找到例子和实例下载地址。
• 回头一看，例子在github也能下载的。
  
• 照着例子写了个基础的。

效果

代码

• 组件TagTitle.vue

注意：建议封装成组件，写在一个页面的时候，可能是层级太深，我用el-dialog套在外面Swiper对象初始化不了。我踩的一个坑。

<template>
    
    <div class="container">
        <!-- Swiper -->
        <div class="swiper-container" ref="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" @click="switchSlide(count)" v-for="count in 10 " :key="count" >Slide {{count}}</div>
         
          </div>
          <!-- Add Pagination -->
          <!-- <div class="swiper-pagination" ref="pagination"></div> -->
        </div>
    </div>
  </template>
  <script>
  // Import Swiper Vue.js components
  import Swiper from "swiper";
  // Import Swiper styles
  import "swiper/css/swiper.min.css";
  
  export default {
    name: "TagTitle",
    data() {
      return {
        swiper: null,
      };
    },
    mounted() {
      this.swiper = new Swiper(this.$refs.swiper, {
        slidesPerView: 4,
        spaceBetween: 30,
        centeredSlides: true,
        delay: 3000, 
        paginationClickable: true,


        // pagination: {
        //   el: this.$refs.pagination,
        //   clickable: true,
        // },
      });
    },
    methods: {
        switchSlide(index){
            this.swiper.slideTo(index-1,100)
        },
    },
  };
  </script>
  <style lang="css" scoped>
  
  .swiper-container {
    width: 100%;
    height: 500px;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
  
    /* 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;
  }
  </style>

• 主要就是这个slideTo方法，还有从0开始。

• 页面使用

 
  <div class="xx">
     <el-dialog
      width="100%"
   ...省略其他属性...
    > 
        <TagTitle></TagTitle>
    </el-dialog>
  </div>
  ...省略引入组件代码...