Home Web Front-end JS Tutorial What are the uses of swiper in vue?

What are the uses of swiper in vue?

Apr 20, 2018 am 10:18 AM
swiper usage

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>
Copy after login

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)
Copy after login

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>
Copy after login

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
  }
},
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

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

How to solve the problems encountered when using swiper in vue3 How to solve the problems encountered when using swiper in vue3 May 11, 2023 pm 01:07 PM

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

Usage of WPSdatedif function Usage of WPSdatedif function Feb 20, 2024 pm 10:27 PM

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 correctly use the exit function in C language How to correctly use the exit function in C language Feb 18, 2024 pm 03:40 PM

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 isinstance function Introduction to Python functions: Usage and examples of isinstance function Nov 04, 2023 pm 03:15 PM

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 abs function Introduction to Python functions: Usage and examples of abs function Nov 03, 2023 pm 12:05 PM

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

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

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

Using the distinct keyword in parsing SQL Using the distinct keyword in parsing SQL Feb 18, 2024 pm 09:21 PM

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

See all articles