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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
flash用php连接数据库的代码
2011/04/21 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python实现二叉堆
2016/02/03 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
python3的pip路径在哪
2020/06/23 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
如何定义一个可复用的服务
2014/09/30 面试题
总经理岗位职责描述
2014/02/08 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技