3 सवाल: स्लाइडर में डिजिट फॉर्मेट पेजिनेशन को बदलें

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

एक स्वैपर स्लाइडर है, अब पेजिनेशन 1 - 3 की तरह दिखता है, मुझे 01 - 03 जैसा होना चाहिए।

यहां एक डेमो

है

https://codepen.io/anakin_skywalker94/pen/RmWxbE

एचटीएमएल

<!-- 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>

जे एस

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 से कम और

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;
  }
});
से अधिक है।

तो आपका JS कुछ इस तरह दिखाई देगा:

type

कोडपेन पर कार्यशील डेमो देखें: https://codepen.io/Orlandster/pen/jobZmz

    
1
2019-05-08 16: 07: 53Z
  1. 2019-05-08 16: 00: 36Z
  2. @ डैनियल संतरी, मैं
        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>
    को कस्टम में बदलना भूल गया हूं। मैंने आपके कोडपेन का कांटा जोड़ा है। आप इसे देख सकते हैं: codepen.io/Orlandster/pen/jobZmz
    2019-05-08 16: 08: 37Z

    type:'custom'
        
    0
    2019-05-08 16: 00: 20Z

    आपको पृष्ठ संख्या renderCustom का उपयोग करना चाहिए और फिर जिस तरह से आप नीचे देखना चाहते हैं, उसे प्रस्तुत करने के लिए padStart पर 06003509911110014035062 का उपयोग करें, यदि लंबाई एक अंक है, तो जाँच करने के लिए 06003509911110014035062 का उपयोग करें।

    <!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
स्रोत रखा गया यहाँ