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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
编写v-for循环的技巧汇总
Dec 01 Javascript
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
我的论坛源代码(三)
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python Socket编程详细介绍
2017/03/23 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
倡议书范文格式
2014/05/12 职场文书
幼师求职自荐信
2014/05/31 职场文书
节约用电标语
2014/06/17 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书