How to operate swiper in vue

This time I will show you how to use swiper in vue, and what are the precautions for using swiper in vue. The following is a practical case, let's take a look.

Introduction to Swiper

Swiper is often used to touch and slide content on mobile websites.

Swiper is a sliding special effects plug-in created purely with JavaScript, targeting mobile terminals such as mobile phones and tablets.

Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.

Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!

Solve the problem of using the swiper plug-in in vue. After introducing the swiper plug-in, we found that it could not run normally.

This time we simulated removing the data from the background, and then bound the data in the swiper tag.

<template> 
 <p class="homePage"> 
  <abc></abc> 
  <p id="banner"> 
   <p class="swiper-container"> 
     <p class="swiper-wrapper"> 
     <p class="swiper-slide" v-for="items in swiper" ><a href=""><img :src=" rel="external nofollow" items.activity.img"></a></p> 
     </p> 
     <p class="swiper-pagination"></p> 
   </p> 
  </p> 
 </p> 
</template> 
<script> 
import Swiper from "../../static/js/swiper-3.4.0.min.js"; 
import header from 'components/header.vue'; 
export default { 
 components : { 
  abc : header 
 }, 
 data(){ 
 return { 
  swiper:"" 
 } 
 }, 
 mounted(){ 
 this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){ 
   this.swiper=res.data.data.slide; 
   var mySwiper = new Swiper('.swiper-container', { 
   autoplay: 2000,//可选选项，自动滑动 
    //分页器 
   pagination : '.swiper-pagination', 
   paginationClickable :true, 
   observer: true 
   }) 
  }) 
 } 
 
} 
</script> 
<style type="text/css"> 
 @import "../../static/css/home.css"; 
 @import "../../static/css/swiper-3.4.0.min.css"; 
</style>

The key point is the use of mounted(). These methods need to be used in mounted(). mounted() is the vue life cycle hook. You can also understand it as when the instance is mounted to the DOM. Only then will the method be triggered.

Let’s take a look at the usage of swiper in vue

First passnpm i vue-awesome-swiper --save Download the plug-in in vue

Then introduce it into main.js

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

Then insert the code into the structure of the component you need to use

<p class="banner">
<swiper :options="swiperOption">
<swiper-slide v-for="items in allData.bannerphoto" key="items">
<img :src="items" alt="">
</swiper-slide>
<p class="swiper-pagination" slot="pagination"></p>
</swiper>
<p class="jc"></p>
</p>

Then in the data Define the carousel chart

swiperOption: {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: false,
coverflow: {
　　rotate: 30,
　　stretch: 10,
　　depth: 60,
　　modifier: 2,
　　slideShadows : true
　　}
},

The coverflow at this time is the way to switch the carousel chart. Changing the properties can switch the carousel mode.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue makes component carousel switching effect

How to use operator overloading

The above is the detailed content of How to operate swiper in vue. For more information, please follow other related articles on the PHP Chinese website!