3 Вопрос: Измените формат цифр пагинации в слайдере

вопрос создан в Wed, May 8, 2019 12:00 AM

Есть слайдер Swiper, теперь нумерация страниц выглядит как 1 - 3, я должен быть таким же, как 01 - 03.

Вот демонстрация

https://codepen.io/anakin-skywalker94/pen/RmWxbE р>

HTML

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

JS р>

var swiper = new Swiper('.swiper-container', { 
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
        direction: 'horizontal',
        loop: true,
        slidesPerView: 1,
        spaceBetween: 0,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
          clickable: true,

        renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' + ' <span>-</span> ' + '<span class="' + totalClass + '"></span>'; }
        },

    });

Спасибо!

    
2
3 ответа                              3                         

Вы можете использовать что-то вроде ('0' + 4).slice(-2), чтобы добавить 0 перед номерами, которые меньше, чем 10 и выше, чем 0.

Итак, ваш JS будет выглядеть примерно так:

var swiper = new Swiper('.swiper-container', { 
  pagination: {
    el: '.swiper-pagination',
    type: 'custom',
    renderCustom: function (swiper, current, total) {
      return ('0' + current).slice(-2) + ' of ' + ('0' + total).slice(-2);
    }
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  direction: 'horizontal',
  loop: true,
  slidesPerView: 1,
  spaceBetween: 0,
  mousewheel: true,
    renderCustom: function (swiper, current, total) {
      return current + ' of ' + total;
  }
});

См. рабочую демонстрацию по codepen: https://codepen.io/Orlandster/pen/jobZmz р>     

1
2019-05-08 16: 07: 53Z
  1. 2019-05-08 16: 00: 36Z
  2. @ Даниэль, я забыл изменить type на пользовательский. Я добавил вилку вашего кодекса. Вы можете проверить это: codepen.io/Orlandster/pen/jobZmz
    2019-05-08 16: 08: 37Z

р>

    var swiper = new Swiper('.swiper-container', { 
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
        direction: 'horizontal',
        loop: true,
        slidesPerView: 1,
        spaceBetween: 0,
        mousewheel: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'custom',
          clickable: true,
        renderCustom: function (swiper, current, total) {
          function numberAppend(d) {
    return (d < 10) ? '0' + d.toString() : d.toString();
}
      return numberAppend(current) + ' of ' + numberAppend(total); 
  }
        },

    });
.swiper-slide {
  width: 100%;
  height: 400px;
  background: yellow;
}
.swiper-container {
height:300px
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet"/>
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 01</div>
        <div class="swiper-slide">Slide 02</div>
        <div class="swiper-slide">Slide 03</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>
    
0
2019-05-08 16: 00: 20Z

Вы должны использовать нумерацию страниц type:'custom', а затем использовать renderCustom, чтобы сделать нумерацию страниц так, как вы хотите, чтобы она выглядела ниже, и использовать padStart, чтобы добавить 0, проверив, равна ли длина одной цифре.

р>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
    .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #000;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
    }
    
    .swiper-pagination-bullet-active {
      color: #fff;
      background: #007aff;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type:'custom',
        renderCustom: function(swiper, current, total) {
        
            let currentLabel = current.toString().length==1?current.toString().padStart(2,'0'):current;
            let totalLabel = total.toString().length==1?total.toString().padStart(2,'0'):total;
            
            return currentLabel + ' - ' + totalLabel;
          //return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
      },
    });
  </script>
</body>

</html>
    
0
2019-05-08 16: 07: 59Z
источник размещен Вот