SoFunction
Updated on 2025-04-05

Tutorial on using vue-swiper

swiper is a plugin I used to use for front-end pages before. I think it is very useful. Swiper provides carousel effects that are diverse in forms and adapted to each terminal. This article is a tutorial on using vue-swiper that the editor brings to you.

vue-awesome-swiper official website link/package/vue-awesome-swiper

Like the previous essay, we first download the package and then go to the configuration inside.

npm install vue-awesome-swiper --save

We can use the import method

// import 
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

You can also use require

var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')

Both can achieve the purpose, and then register it globally

(VueAwesomeSwiper)

Use in templates

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
 components: {
  swiper,
  swiperSlide
 }
} 

<template>
 <swiper :options="swiperOption" ref="mySwiper">
  <!-- 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>
 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption: {//If you don't understand the following configuration, you can go to the official website of swiper to view the API, link /api/     // notNextTick is a component's own attribute. If notNextTick is set to true, the component will not instantiate swiper through NextTick, which means you can get the swiper object as soon as possible. <br>If you need to use the swiper object to do something just loaded, then this attribute must be true     notNextTick: true,
     // Swiper configs All configurations are the same as Swiper official API configuration     autoplay: 3000,
     direction : 'vertical',
     grabCursor : true,
     setWrapperSize :true,
     autoHeight: true,
     pagination : '.swiper-pagination',
     paginationClickable :true,
     prevButton:'.swiper-button-prev',//Previous     nextButton:'.swiper-button-next',//Next     scrollbar:'.swiper-scrollbar',//Scrollbar     mousewheelControl : true,
     observeParents:true,
     // If you design the plug-in yourself, some configuration-related parameters of the plug-in should also appear in this object, as follows debugger     debugger: true,
    }
   }
  },
 }
&lt;/script&gt;

This will be available

<--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

I didn't use this plugin much. I looked at it today and found that there were some minor changes, which may have affected the previous ones. The original words of the npm package publisher are

// starting with version 2.6.0, you need to manually introduce swiper's css

require('swiper/dist/css/')

When I wrote this essay, it was still version 2.4.2 and has not been updated to version 2.6.0, so there is no problem with the style. Today I updated the package and tried what I wrote before, and found that there was a problem with the style. So I found the document, I hope it can help you