swiper轮播图在vue2中的使用

十二春秋
9,322 阅读2分钟

vue2中使用swiper

注意事项：

在网上看了大部分说法，swiper7,8多数用在vue3上，而swiper6的坑比较多。所以这里使用的是swiper5
安装：
npm i swiper@5

swiper5使用时还需同步安装vue-awesome-swiper
同样最新版的vue-awesome-swiper也会报错，所以这里使用的是

npm i vue-awesome-swiper@4

main.js

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)

轮播图的结构

<template>
<div class="app-container">
<!--主体为swiper标签-->
<!--属性 :options 绑定的是data中设置的swiper配置项-->
<!--属性 ref 用于获取该dom元素，在计算属性computed中将被调用-->
<!--属性 id 为swiper最外层容器设置css样式-->
<swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
        
      <!--必须的组件-->
      <!--每页幻灯片使用swiper-slide标签-->
      <!--幻灯片组件生成的标签自带.swiper-slide的类名，但单类名选择器设置的部分css(如宽高)将被覆盖-->
      <swiper-slide class="swiper_slide_item">I'm Slide 1</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 2</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 3</swiper-slide>
      
      <!-- 可选的控件 -->
      <!--分页器-->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--滚动条-->
      <div class="swiper-scrollbar" slot="scrollbar"></div>
      <!--前进后退按钮-->
      <div class="swiper-button-prev" slot="button-prev"></div> 
      <div class="swiper-button-next" slot="button-next"></div>
</swiper>

<!--配置自定义的页面跳转按钮，to(page)为自定义方法，其内调用了swiper的内置方法-->
<button @click="to(1)">点击跳转到Slide 1</button>
<button @click="to(2)">点击跳转到Slide 2</button>
<button @click="to(3)">点击跳转到Slide 3</button>

</div>
</template>

<script>
export default {
  name: "carrousel",
  data() {
    return {
    //swiperOption：swiper配置项信息，需要绑定在swiper标签的 :option 属性中
      swiperOption: {
      
        //幻灯片放映方向
        direction: 'vertical', //通常不与左右按钮一同使用
        
        //分页器配置项
        pagination: {
          el: ".swiper-pagination", //分页器的类名
          clickable: true, // 点击分页器跳切换到相应的幻灯片
          type: 'bullets' | 'progressbar' | 'fraction' , //小圆点|进度条|数字页码
          dynamicBullets: true,  //动态小圆点(type:'bullets'时)
          //自定义分页器，需设置样式
          renderBullet(index, className) {
              return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
            },
        },
        
        //前进后退按钮
        navigation: { 
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev' 
        },
        
        //滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
            hide: true
        },
        
        //幻灯片播放配置项
        loop: true, //是否循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
        autoplay: {
          delay: 2000, // 幻灯片停留时间
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          stopOnLastSlide: true, // 切换到最后一个slide时是否停止自动切换。（loop模式下无效）。
        },
        on: {
          slideChangeTransitionEnd: function () {
            console.log(this.activeIndex); //每次切换结束时，在控制台打印现在是第几个slide
          },
        },
      },
    };
  },
  
  //计算属性
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  
  //设置自定义的按钮，点击后将前往目标也页
  methods: {
    to(index) {
      this.swiper.slideTo(index)
      console.log(this.swiper);
    }
  }
};
</script>

<style>
<!--容器样式-->
  #mySwiper{
    width: 500px;
    height: 100px;
    background-color: aquamarine;
  }
<!--幻灯片样式-->
 .swiper-slide.swiper_slide_item{
    height: 300px;
    background-color:aliceblue;
  }
<!--自定义分页器样式-->
  #mySwiper /deep/ .swiper-pagination-bullet-custom.swiper-pagination-bullet{
    width: 15px !important;
    height: 15px !important;
  }
</style>

容器样式设置

外层容器的样式设置

可直接为swiper标签添加id(class也行，不过id看着靠谱些)，在style标签中使用css进行样式添加
另外，若未给swiper-slide标签添加样式，则其会自动撑满swiper容器，且继承swiper的颜色（但是我并未看到swiper-slide的背景色属性）

幻灯片的样式设置

注1：不要强行修改幻灯片宽度
幻灯片的原理为：在宽度为width的容器中一张宽度为width*页数的长元素通过transform进行移动来实现轮播效果，所以若强行改变子元素的宽度，则会出现多页幻灯片同时出现在容器内的效果。
使用！important强行修改幻灯片宽度的结果容器中挤了3张幻灯片 image.png 注2:swiper-slide标签自带swiper-slide类名
幻灯片swiper-slide标签自带部分css属性且优先度比单类名选择器高
swiper-slide 的样式:

image.png

其中幻灯片的width属性会直接根据swiper标签的width写入到行内样式中，以保证容器的宽度和幻灯片一致

幻灯片的高度和颜色设置：
直接在css中使用.swiper-slide选择器会失效
此时可以为swiper-slide添加自定义类名

<swiper-slide class="swiper_slide_item">I'm Slide 1</swiper-slide>
<swiper-slide class="swiper_slide_item">I'm Slide 2</swiper-slide>
<swiper-slide class="swiper_slide_item">I'm Slide 3</swiper-slide>

使用选择器 .swiper-slide.swiper_slide_item {}(两个类名间无空格，效果：选择同时包含两个类名的标签)
若要单独修改某页的高度或背景色可使用行内样式

分页器样式预览

分页器的样式可在data->swiper配置项->分页器配置项中设置(具体位置可在上方轮播图结构代码中找)

        //分页器配置项
        pagination: {
          el: ".swiper-pagination", //与分页器的类名绑定
          type: 'progressbar', //选择分页器的类型（默认为小圆点）
          clickable: true, // 点击分页器跳切换到相应的幻灯片(不是所有分页器都支持)
        },

默认样式-小圆点

不写type或type='bullets'

image.png

动态小圆点

不写type或type='bullets'
dynamicBullets: true,

image.png

进度条

type: 'progressbar'

image.png

数字页码

type: 'fraction'

image.png

自定义样式

需要导入样式

pagination: {
          el: ".swiper-pagination",
          renderBullet(index, className) {
              return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
            },
          clickable: true,
},

//style中的样式
#mySwiper /deep/ .swiper-pagination-bullet-custom.swiper-pagination-bullet{
    width: 15px !important;
    height: 15px !important;
  }

image.png

更多效果

swiper在vue2中的使用

avatar
文章
阅读
粉丝