vue-awesome-swiper滑块插件使用基础

microelec 发布于2019-08-20 17:54 / 1486人阅读

摘要：前言目前在使用建立的版项目中，直接引入官方的文件会导致报错，所以需要用到版本的。安装版配置使用可参考插入滑块组件与官方相同，额外的控制器依然可以放到整个滑块之外。

前言

目前(2017-07-11)在使用vue-cli建立的webpack版项目中，直接引入官方的swiper文件会导致报错，所以需要用到vue版本的swiper。

webpack-simple版可直接引入官方swiper文件，参考这里

新建vue项目

此处使用vue-cli新建项目

vue init webpack demo
//Enter + y 全部选 yes
cd demo
npm i

补安装sass-loader node-sass

由于不明原因，vue的webpack版竟没有装sass，需要另外安装，不需要用sass则可跳过此步。

npm i -D sass-loader node-sass

安装vue版swiper

npm i -S vue-awesome-swiper

配置使用

可参考 A simple vue-awesome-swiper demo

import vue-awesome-swiper

import { swiper, swiperSlide } from "vue-awesome-swiper"

插入滑块组件

与官方swiper相同，额外的控制器依然可以放到整个滑块之外。


 
 I"m Slide 1
 I"m Slide 2
 I"m Slide 3

设置参数

export default {
 name: "carrousel",
 data() {
   return {
     swiperOption: {
       // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
       notNextTick: true,
       // swiper configs 所有的配置同swiper官方api配置
       autoplay: 3000,
       prevButton:".swiper-button-prev",
       nextButton:".swiper-button-next",
     }
   }
 },
 components: {
 swiper,
 swiperSlide
},
}

完整参考

demo.vue

附官方api

swiper官方api

vue版swiper项目地址

github地址

云服务器 GPU云服务器滑块插件 html使用插件 js怎么使用图形插件使用基础

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83959.html

vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0
vue引入新版 swiper,vue-awesome-swiper填坑

摘要：出错前纠正后总结官网其实早放出说明来了，但自己一看全是英文，就没想看下去。发现网上关于最新就两三篇，而且没说清楚。于是写下这篇，希望对大家有帮助。关于新版 swiper,vue-awesome-swiper 问题为什么我的swiper,vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的swiper不会自动播放？为什么我的swiper没有c...

Miyang 2019-08-22 14:01 评论0 收藏0
【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0