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

Source: Internet
Author: User
Tags documentation prev

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!










Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.