1,pagination的配置
pagination: {
  el: '.swiper-paginationfull',
  // type:'bullets',
  // bulletElement : 'span',//设置分页器小圆点标签,默认为span标签
  // clickable:true,
  // paginationClickable: true,
  // notNextTick:true,
  // bulletClass: 'bullet-class',
  // bulletActiveClass: 'bullet-active-class',
  type:'custom',//自定义导航的前提设置
  renderCustom: function (swiper, current, total) {//current从1开始 total=5       有5个轮播页
    var customPaginationHtml = "";
    for(var i = 0; i < total; i++) {//加导航点
      if(i == (current - 1)) {
        customPaginationHtml += '<span class="bullet-class bullet-active-class"></span>';
      } else {
        customPaginationHtml += '<span class="bullet-class"></span>';
      }
    }
    for(var i = 0; i < total-1; i++){//加分割线(可不加 完全自定义)
      customPaginationHtml += '<div class="line"></div>'
    }
    return customPaginationHtml;
  }
},
2,//导航盒子 采用固定定位
.swiper-paginationfull{
position:fixed;
top:50%;
transform:translateY(-50%);
left:98%;
z-index:1;
width:0.3rem;
height:1.52rem;
}
3,//给导航点加点击事件   在mounted里            这里采用事件代理的方式
$('.swiper-paginationfull').on('click','span',function(){
  var index = $(this).index();
  self.$refs.mySwiper.swiper.slideTo(index, 500, false);//切换到第一个slide,速度为0.5秒
});
 
中间的导航点样式可以自定义,想怎么写就怎么写,不过这些关于导航的样式需要import引入 在swiper实例化之前  我也不知道为啥
  script中写
import '@/css/bullet.css';

vueawesomeswiper自定义 导航点的更多相关文章

  1. 自定义vueawesomeswiper分页器样式

    swiperOption: {//swiper的配置项 notNextTick: true,//想获得swiper实例对象,这个必须为true direction: 'vertical', // gr ...

  2. vue中使用swiper并自定义分页器样式

    一,安装swiper 执行命令 npm install vue-awesome-swiper --save 二,引入swiper import {Swiper} from "vue-awes ...

  3. vue-awesome-swiper的使用以及API整理

    一.先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4&q ...

  4. vue-awesome-swiper插件爬坑

    最近自己在做一个基于vue的知乎的移动端单页面,遇到很多坑,先说一下遇到最大的坑,其实并不推荐使用 vue-awesome-swiper,如果项目应用轮播,切换少的话.言归正传,现在来介绍vue-aw ...

  5. vue-cli中轮播图vue-awesome-swiper使用方法

    1 npm 安装 npm install vue-awesome-swiper --save 2在所用的组件中引入 import 'swiper/dist/css/swiper.css' import ...

  6. 使用vue-awesome-swiper滑块插件

    基于之前写的vue2.0 + vue-cli + webpack 搭建项目( vue-awesome-swiper版本:3.1.3 ,swiper4,如果成功后没报错,但不显示分页样式,可能版本对不上 ...

  7. 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  8. 关于Unity3D自定义编辑器的学习

    被人物编辑器折腾了一个月,最终还是交了点成品上去(还要很多优化都还么做).  刚接手这项工作时觉得没概念,没想法,不知道.后来就去看<<Unity5.X从入门到精通>>中有关于 ...

  9. 一起学微软Power BI系列-使用技巧(5)自定义PowerBI时间日期表

    1.日期函数表作用 经常使用Excel或者PowerBI,Power Pivot做报表,时间日期是一个重要的纬度,加上做一些钻取,时间日期函数表不可避免.所以今天就给大家分享一个自定义的做日期表的方法 ...

随机推荐

  1. 查询mssql 密码

    select name,password from syslogins Select master.dbo.fn_varbintohexstr(password_hash) from sys.sql_ ...

  2. /etc/issue

    /etc/issue 与 /etc/motd 作用一致,都是用于显示欢迎信息,区别在于 /etc/issue 是在 login 提示符之前显示,而 /etc/motd 则在在用户成功登录系统之后显示 ...

  3. 在 Linux 使用 GCC 编译C语言共享库

    对任何程序员来说库都是必不可少的.所谓的库是指已经编译好的供你使用的代码.它们常常提供一些通用功能,例如链表和二叉树可以用来保存任何数据,或者是一个特定的功能例如一个数据库服务器的接口,就像MySQL ...

  4. this关键字制定对象的属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. c++学习笔记—单链表基本操作的实现

    用c++语言实现的单链表基本操作,包括单链表的创建(包括头插法和尾插法建表).结点的查找.删除.排序.打印输出.逆置.链表销毁等基本操作. IDE:vs2013 具体实现代码如下: #include  ...

  6. SeaJS之use函数

    有了 define 等模块定义规范的实现,我们可以开发出很多模块.但光有一堆模块不管用,我们还得让它们能跑起来.在 SeaJS 里,要启动模块系统很简单: <script src=”path/t ...

  7. java基础---->java注解的使用(一)

    注解是众多引入到Java SE5中的重要的语言变化之一.它为我们在代码中添加信息提供了一种形式化的方法,使我们可以在稍后某个时刻非常方便的使用这些数据.今天我们就开始学习一下java中注解的知识. j ...

  8. 【本周主题】第一期:JavaScript单线程与异步

    相信下边这个图一定都不陌生,本周就围绕这张图深入了解下js代码执行时的来龙去脉. 一.JavaScript是单线程的 2018-11-19 21:21:21 周一 js本质是单线程的.这一特性是jav ...

  9. Learning Git by Animations

    https://hujiaweibujidao.github.io/blog/2016/05/20/learning-git-by-animations/ http://learngitbranchi ...

  10. cmake openssl ios

    1 下载源代码 git clone https://github.com/pol51/OpenSSL-CMake.git cd OpenSSL-CMake mkdir build && ...