Plug-in Vue-awesome-swiper (----------Vue Carousel Map for the Perfect travel project)

Vue-awesome-swiper

Vue-awesome-swiper Resource address: Carousel map GitHub

swiper2.x official use of documents: Swiper2 official documentation API

Documentation for all configurations: swiper3.x configuration Document

Use:

1. First NPM install dependent (I use 2.6.7 version)

NPM Install vue-awesome-swiper@2.6.7--save

2. Globally introduced method: Add in Main.js:

Import Vue from ' Vue '
import vueawesomeswiper from ' vue-awesome-swiper '

//Require Styles
import ' swiper/ Dist/css/swiper.css '

vue.use (vueawesomeswiper, * {Default global options} * *)

PS: There are also methods introduced in the form of components (see GitHub):

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

import {swiper, swiperslide} from ' Vue-awesome-swiper ' C6/>export Default {
  components: {
    swiper,
    swiperslide
  }
}

3. Use in Components:

<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> <swi Per-slide>i ' m slide 5</swiper-slide> <swiper-slide>i ' m slide 6</swiper-slide> <swiper-slid E>i ' m Slide 7</swiper-slide> <!--Optional controls--> <div class= ' swiper-pagination ' slot= ' PA  Gination "></div> <div class=" Swiper-button-prev "slot=" Button-prev "></div>//left arrow <div class= "Swiper-button-next" slot= "Button-next" ></div>//Right arrow <div class= "Swiper-scrollbar" slot= "Scrol" Lbar "></div>//rolling axes </swiper> </template>

<script>
  Export Default {
    name: ' Carrousel ',
    data () {return
      {
        swiperoption: {
          //some Swiper options/callbacks///
          all parameters with Swiper official API parameters
          //...
        }}
    ,
    computed: {
      swiper () { return this
        . $refs. Myswiper.swiper
      }
    },
    mounted () {
      //current Swiper instance
      // Then you can use the Swiper object in the current context to do what you want to do.
      Console.log (' This is present Swiper instance object ', This.swiper)
      This.swiper.slideTo (3, 1000, false)
    }
  }
</script>

To write the Swiperoption option in the component's data () {} to the desired content, loop through the display: loop:true, paging: pagination

Read more documents and read more documents!