如何将刷卡器中的分页项目符号更改为文本?-前端问题

how to change the pagination bullet in a swiper to text?(如何将刷卡器中的分页项目符号更改为文本?)

本文介绍了如何将刷卡器中的分页项目符号更改为文本?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的项目中:

活动"变为绿色.

我读到(来自:http://idangero.us/swiper/api/)我可以用这个自定义:

 paginationBulletRender: function (index, className) {return '<span class="' + className + '">'+ (index + 1) + '</span>';}

对不起，我迷路了，

怎么做?

解决方案

您应该改用 paginationCustomRender 来创建自定义设计.在每个 div 中定义您的 names

var mySwiper2 = new Swiper('.swiper-container.shoes', {//可选参数分页:'.pag-shoes',分页可点击:真，nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',spaceBetween: 30,循环:真，分页类型:自定义"，paginationCustomRender:功能(刷卡器，当前，总计){变量名称 = [];$(".swiper-wrapper.swiper-slide").each(function(i) {names.push($(this).data("name"));});var text = "

<script src="aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMi4xLjEvanF1ZXJ5Lm1pbi5qcw=="></脚本><link rel="stylesheet" href="http://moransh4.github.io/Luca/css/swiper.min.css"><script src="aHR0cDovL21vcmFuc2g0LmdpdGh1Yi5pby9MdWNhL2pzL3N3aXBlci5qcXVlcnkubWluLmpz"></script><div class="swiper-container shoes"><div class="swiper-wrapper"><div class="swiper-slide" data-name="LEVEL1"><img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsmbHQ7L2RpdiZndDsmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="DESIGN"><img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsmbHQ7L2RpdiZndDsmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="PERFORMANCE"><img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsmbHQ7L2RpdiZndDsmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="DESIGN"><img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsmbHQ7L2RpdiZndDsmbHQ7L2RpdiZndDsmbHQ7IS0tIOa3u+WKoOWIhumhtS0tJmd0OyZsdDtkaXYgY2xhc3M9"swiper-pagination pag-shoes"></div><!-- 添加箭头--><div class="swiper-button-next">></div><div class="swiper-button-prev"><</div></div>

In my project : http://moransh4.github.io/Luca/



I need to change the swiper-pagination-bullet at the last section to this:



The "active" change to green.

I read ( from : http://idangero.us/swiper/api/) that i can customize with this :
 paginationBulletRender: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
Sorry  i go lost with it, 

How to do it?
 解决方案 
You should instead use paginationCustomRender to create custom design.Define your names in each div



var mySwiper2 = new Swiper('.swiper-container.shoes', {
  // Optional parameters
  pagination: '.pag-shoes',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  loop: true,
  paginationType: "custom",
  paginationCustomRender: function(swiper, current, total) {
    var names = [];
    $(".swiper-wrapper .swiper-slide").each(function(i) {
      names.push($(this).data("name"));
    });
    var text = "<span style='background-color:black;padding:20px;'>";
    for (let i = 1; i <= total; i++) {
      if (current == i) {
        text += "<span style='border-top:1px solid green;margin-right:4px;color:green;padding:10px;'>" + names[i] + "</span>";
      } else {
        text += "<span style='border-top:1px solid white;margin-right:4px;color:white;padding:10px;'>" + names[i] + "</span>";
      }

    }
    text += "</span>";
    return text;
  }

});

<script src="aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMi4xLjEvanF1ZXJ5Lm1pbi5qcw=="></script>
<link rel="stylesheet" href="http://moransh4.github.io/Luca/css/swiper.min.css">
<script src="aHR0cDovL21vcmFuc2g0LmdpdGh1Yi5pby9MdWNhL2pzL3N3aXBlci5qcXVlcnkubWluLmpz"></script>
<div class="swiper-container shoes">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-name="LEVEL1">
      <img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsNCiAgICAmbHQ7L2RpdiZndDsNCiAgICAmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="DESIGN">
      <img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsNCiAgICAmbHQ7L2RpdiZndDsNCiAgICAmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="PERFORMANCE">
      <img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsNCiAgICAmbHQ7L2RpdiZndDsNCiAgICAmbHQ7ZGl2IGNsYXNzPQ=="swiper-slide" data-name="DESIGN">
      <img src="aHR0cDovL3BsYWNlaG9sZC5pdC82MDB4MzAw" alt="IiZndDsNCiAgICAmbHQ7L2RpdiZndDsNCiAgJmx0Oy9kaXYmZ3Q7DQogICZsdDshLS0gQWRkIFBhZ2luYXRpb24gLS0mZ3Q7DQogICZsdDtkaXYgY2xhc3M9"swiper-pagination pag-shoes"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next">></div>
  <div class="swiper-button-prev">
    <</div>
  </div>





                        这篇关于如何将刷卡器中的分页项目符号更改为文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！