What are the uses of swiper in vue?
This time I will bring you how to use swiper in vue, what are the notes when using swiper in vue, the following is a practical case, let's take a look.
Swiper is a sliding special effects plug-in created purely with javascript, targeting mobile phones, tablets and other mobile terminals. This article mainly introduces the solution to the use of swiper plug-in in vue and the usage of swiper in vue. Friends in need can refer to
Swiper Introduction
Swiper is often used for content touch sliding 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 data 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 vuelife cycle hook. You can also understand it as the current This method will be triggered only after mounting the instance to the DOM.
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:
Detailed explanation of using mint-ui in vue
Detailed explanation of using webpack hot module replacement
How to choose the jQuery version
The above is the detailed content of What are the uses of swiper in vue?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

1. Install swiper. Use npminstallswiper to install the swpier plug-in npminstallswiper-s//@9.2.0// or install the specified version npminstallswiper@8.4.7-s. 2. Use swiper to directly follow the reference method on the official website. The project will report an error. Solution: introduced The component uses the following path import{Swiper,SwiperSlide}from "swiper/vue/swiper-vue"; import "swiper/swiper.min.css"; sometimes required

WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.

How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

Detailed explanation of distinct usage in SQL In SQL databases, we often encounter situations where we need to remove duplicate data. At this time, we can use the distinct keyword, which can help us remove duplicate data and make the query results clearer and more accurate. The basic usage of distinct is very simple, just use the distinct keyword in the select statement. For example, the following is a normal select statement: SELECTcolumn_name
