title: Swiper custom Pagination
body: <p>I'm trying to create a pagination and slider similar to the one on www.dreamperfectregime.com </p>
  
  <p>It needs to be verticle, and mouse scrollable as well. </p>
  
  <p>Currently, the slider works, but there is no pagination at all. </p>
  
  <p>I need help getting the pagination to show, and getting it customized.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Link Swiper's CSS --&gt;
  &lt;link rel="stylesheet" href="css/swiper.min.css"&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Swiper --&gt;
  &lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide" data-name="Item 1"&gt;Luke Sciberras&lt;/div&gt;
          &lt;div class="swiper-slide" data-name="Item 2"&gt;About&lt;/div&gt;
          &lt;div class="swiper-slide" data-name="Item 3"&gt;Portfolio&lt;/div&gt;
          &lt;div class="swiper-slide" data-name="Item 4"&gt;Contact Me&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Add Pagination --&gt;
      &lt;div class="swiper-pagination1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;!-- Swiper JS --&gt;
  &lt;script src="js/swiper.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Initialize Swiper --&gt;
  &lt;script&gt;
  var names = [];
  $(".swiper-wrapper .swiper-slide").each(function(i) {
  names.push($(this).data("name"));
  });
  
  
  var swiper = new Swiper('.swiper-container', {
          pagination: {
      el: '.swiper-pagination1',
      type: 'custom',
  renderCustom: function(swiper, current, total) {
      var text = "&lt;span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'&gt;";
      for (let i = 1; i &lt;= total; i++) {
              //alert(total);
          if (current == i) {
  
              text += "&lt;span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'&gt;" + names[i-1] + "&lt;/span&gt;";
  
          } 
  
          else {
  
              text += "&lt;span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'&gt;" + names[i] + "&lt;/span&gt;";
          }
      }
      text += "&lt;/span&gt;";
      return text;
  }
  },
      direction: 'vertical',
      slidesPerView: 1,
      paginationClickable: true,
      spaceBetween: 30,
      mousewheelControl: true
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>