Home > Article > Web Front-end > Using swiper plugin in vue
This time I will bring you the use of the swiper plug-in in vue. What are the precautions for using the swiper plug-in in vue? The following is a practical case, let's take a look.
Swiper Introduction
Swiper is often used for content touch sliding on mobile websites. Swiper is a sliding special effects plug-in created purely withjavascript, targeting mobile phones, tablets and other mobile terminals.
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 thendata binding 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
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
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:
Angular5 Add style class step instructions to component tags
Vue makes internal component carousel switching Detailed explanation of steps
The above is the detailed content of Using swiper plugin in vue. For more information, please follow other related articles on the PHP Chinese website!