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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
js实现跨域的多种方法
Dec 25 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JavaScript实现新年倒计时效果
Nov 17 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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
?繁体转换的class
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
xml和web特殊字符
2009/04/28 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
学习JavaScript设计模式(多态)
2015/11/25 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
药店促销活动策划方案
2014/08/24 职场文书
户外活动总结
2015/02/04 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle