swiper自定义分页器的样式


Posted in Javascript onSeptember 14, 2020

本文实例为大家分享了swiper自定义分页器的样式代码,供大家参考,具体内容如下

swiper自定义分页器的样式

js主要代码

pagination: {
     // 自定义分页器的类名----必填项
    el: '.custom-pagination',

     // 是否可点击----必填项
     clickable: true,

     // 分页的类型是自定义的----必填项
    type: 'custom',

          // 自定义特殊类型分页器,当分页器类型设置为自定义时可用。
          renderCustom: function (swiper, current, total) {
           
            console.log(current);//1 2 3 4
          }
},

一、el

分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外,不同Swiper的组件应该有所区分,如#pagination1,#pagination2。

二、分页器样式类型 可选

‘bullets' 圆点(默认)
‘fraction' 分式
‘progressbar' 进度条
‘custom' 自定义

三、renderCustom()

自定义特殊类型分页器,当分页器类型设置为自定义时可用。

四、slideToLoop()

在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 1、CDN引入文件 -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
  <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>

  <!--2、文件自己引入 -->
  <!-- <script src="swiper.min.js"></script>
  <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
  <script src="jquery.js"></script> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      text-align: center;
      overflow: hidden;
    }

    a {
      text-decoration: none;
      color: #000;
    }

    .swiper-content {
      width: 80%;
      overflow: hidden;
      margin: 0 auto;
    }

    .swiper-content .title {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .swiper-content .nav-item {
      float: left;
      display: block;
      margin-right: 30px;
      width: 50px;
      height: 30px;
      line-height: 30px;
    }

    /* 点击的激活样式 */
    .swiper-content .nav-item.active {
      background-color: #378ee6;
    }

    /* 轮播图的样式 */
    .swiper-content .swiper-container {
      height: 300px;
      background-color: pink;
    }

  </style>
</head>

<body>
  <div class="swiper-content">

    <!-- 自定义导航 -->
    <div class="title">
      <!-- 给ul 添加自定义分页器类名 custom-pagination -->
      <ul class="nav custom-pagination">
        <li class="nav-item active">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        </li>
        <li class="nav-item">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站</a>
        </li>
        <li class="nav-item">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a>
        </li>
        <li class="nav-item">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系</a>
        </li>
      </ul>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <h1>1</h1>
        </div>
        <div class="swiper-slide">
          <h1>2</h1>
        </div>
        <div class="swiper-slide">
          <h1>3</h1>
        </div>
        <div class="swiper-slide">
          <h1>4</h1>
        </div>
      </div>
    </div>

  </div>

  <script>
    var mySwiper = new Swiper('.swiper-container',

      {
        // 循环模式
        loop: true,
        
        pagination: {
          // 自定义分页器的类名----必填项
          el: '.custom-pagination',

          // 是否可点击----必填项
          clickable: true,

          // 分页的类型是自定义的----必填项
          type: 'custom',

          // 自定义特殊类型分页器,当分页器类型设置为自定义时可用。
          renderCustom: function (swiper, current, total) {
            //  console.log(current);//1 2 3 4

            // 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
            $('.custom-pagination').children().eq(current - 1).addClass('active').siblings().removeClass('active');

            // 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
            $('.custom-pagination').on('click', 'li', function () {
              mySwiper.slideToLoop($(this).index(), 1000, false)
            })
          }
        },
      })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 #Javascript
原生JS实现九宫格抽奖
Sep 13 #Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
js+canvas实现画板功能
Sep 13 #Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python中的super()方法使用简介
2015/08/14 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python 调试冷知识(小结)
2019/11/11 Python
Python hashlib模块实例使用详解
2019/12/24 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
使用python求解二次规划的问题
2020/02/29 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
校园门卫岗位职责
2013/12/09 职场文书
检讨书范文大全
2015/05/07 职场文书
辩论赛新闻稿
2015/07/17 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers