3 Thay đổi phân trang định dạng chữ số trong thanh trượt

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Có một thanh trượt Swiper, bây giờ phân trang trông giống như 1 - 3, tôi cần phải giống như vậy 01 - 03.

Đây là bản demo

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>'; }
        },

    });

Cảm ơn!

    
2
3 Câu trả lời                              3                         

Bạn có thể sử dụng một cái gì đó như ('0' + 4).slice(-2) để thêm 0 trước các số thấp hơn 10 và cao hơn 0.

Vì vậy, JS của bạn sẽ trông giống như thế này:

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;
  }
});

Xem bản Demo hoạt động trên codepen: https://codepen.io/Orlandster/pen/jobZmz

    
1
2019-05-08 16: 07: 53Z
  1. Không hoạt động, xem trên codepen. io /anakin-skywalker94 /bút /RmWxbE
    2019-05-08 16: 00: 36Z
  2. @ Daniel sry, tôi đã quên thay đổi type thành tùy chỉnh. Tôi đã thêm một nhánh của codepen của bạn. bạn có thể kiểm tra xem: 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

Bạn nên sử dụng phân trang type:'custom' và sau đó sử dụng renderCustom để hiển thị phân trang theo cách bạn muốn nhìn bên dưới, sử dụng padStart để thêm 0 bằng cách kiểm tra xem độ dài có phải là một chữ số không.

<!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
nguồn đặt đây