_001_swiper_动态改变swiper的属性

1 官网

https://www.swiper.com.cn/api/start/new.html

2 初始化方式

2.1 原生

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
	autoplay: true,//可选选项，自动滑动
})

//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper-container')
var mySwiper = document.querySelector('.swiper-container').swiper
mySwiper.slideNext();
</script>

 动态修改swiper的属性，如下：

<script> 

　　　var mySwiper = new Swiper('.swiper-container',{ 

　　　　　　　　autoplay : 1000, 
　　　　　　　　autoplayDisableOnInteraction : false, 

　　　　　　}) 

　　　$('#btn1').click(function(){ 

　　　　　　mySwiper.params.autoplay=200; 

　　　　　　}) 

</script>

2.2 Vue-Awesome-Swiper 组件方式

https://github.com/surmon-china/vue-awesome-swiper

2.2.1 安装

1 Install
1.1 CDN
<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

1.2 NPM
npm install vue-awesome-swiper --save

1.3 Mount
1.3.1 mount with global
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

1.3.2 mount with component
// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}


1.3.3  mount with ssr
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}
custom swiper plugin
import Swiper from 'swiper'
Swiper.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // swiper callback...
  }
})

 

2.2.2 初始化方式 

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      customswiper() {
        // <swiper :options="swiperOption" ref="mySwiper"
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.customswiper)
      // <swiper :options="swiperOption" ref="mySwiper"
      this.customswiper.slideTo(3, 1000, false)
    }
  }
</script>

 动态修改swiper的属性，如下：

// <swiper :options="swiperOption" ref="mySwiper"
/* computed: {
      customswiper() {
        // <swiper :options="swiperOption" ref="mySwiper"
        return this.$refs.mySwiper.swiper
      }
    }
*/
this.customswiper.params.autoplay=200;