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模拟select,jselect的方法实现
Nov 08 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
js实现拖拽效果
Feb 12 Javascript
jquery实现图片切换代码
Oct 13 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php比较两个绝对时间的大小
2014/01/31 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
jquery 使用简明教程
2014/03/05 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
数据库面试要点基本概念
2013/10/31 面试题
授权委托书范文
2014/07/31 职场文书
运动会宣传稿100字
2015/07/23 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
vue使用watch监听属性变化
2022/04/30 Vue.js