Home > Web Front-end > JS Tutorial > How to use swiper in vue

How to use swiper in vue

php中世界最好的语言
Release: 2018-05-28 13:43:26
Original
4507 people have browsed it

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.

Install

Using under vue cli

npm

##install vue- awesome-swiper --save

In main.js

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

In component.vue

<template>
<p id="container">
 <swiper :options="swiperOption" ref="mySwiper">
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_07.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_06.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_05.jpg" alt="">
  </swiper-slide>
  <swiper-slide class="swiper-slide games">
   <img src="/src/assets/LB/LB_04.jpg" alt="">
  </swiper-slide>
  <p class="swiper-pagination" slot="pagination"></p>
  <p class="swiper-button-prev" slot="button-prev"></p>
  <p class="swiper-button-next" slot="button-next"></p>
 </swiper>   
 </p> 
 </template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 export default {
  name: 'carrousel',
  data () {
   return {
    swiperOption: {
        autoplay : {
      disableOnInteraction: false, //用户操作后是否禁止自动循环
      delay: 3000 //自自动循环时间
     }, //可选选项,自动滑动
     speed: 2000, //切换速度,即slider自动滑动开始到结束的时间(单位ms)
     loop:true, //循环切换
     grabCursor: true, //设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
     // setWrapperSize: true, //Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到。
     autoHeight: true,   //自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。   
     scrollbar: '.swiper-scrollbar',
     mousewheelControl: true, //设置为true时,能使用鼠标滚轮控制slide滑动
     observeParents: true, //当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper
     pagination: {
      el: '.swiper-pagination',
      // type : 'progressbar', //分页器形状
      clickable :true, //点击分页器的指示点分页器会控制Swiper切换
     },
     navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
     },       
   },
   computed: {
    swiper() {
     return this.$refs.mySwiper.swiper
    }
   }
  }
 }
}
</script>
<style scoped>
img {
 width: 100%;
 height: auto;
}
</style>
Copy after login
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:

How to encapsulate Angular network requests


How to implement fuzzy query of vue input box

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

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template