title: Swiper Custom Pagination With Scrollbar
body: <p>I am trying to create a custom pagination scrollbar using <a href="http://idangero.us/swiper/demos/" rel="nofollow noreferrer">Swiper 4.0.6</a>. </p>
  
  <p>I would like something similar to the scroller halfway down <a href="http://moransh4.github.io/Luca/" rel="nofollow noreferrer">this page</a>. See the titles above each scroll section.</p>
  
  <p>According the the <a href="http://idangero.us/swiper/api/#pagination" rel="nofollow noreferrer">API</a> I can use the <code>renderCustom</code> function for this. I can't seem to get it working. I can't see the pagination on screen, although the swiper works fine.</p>
  
  <p>Can anybody help with this issue?</p>
  
  <p>My code so far;</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="swiper-container"&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide" data-name="Item 1"&gt;
              &lt;p&gt;Testing&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide" data-name="Item 2"&gt;
              &lt;p&gt;Testing&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide" data-name="Item 3"&gt;
              &lt;p&gt;Testing&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="swiper-pagination1"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var names = [];
  $(".swiper-wrapper .swiper-slide").each(function(i) {
      names.push($(this).data("name"));
  });
  var swiper1 = new Swiper('.swiper-container', {
      pagination: {
          el: '.swiper-pagination1',
          type: 'custom',
      },
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      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++) {
              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] + "&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;
      }
  });
  </code></pre>
  
  <p>Any advice is appreciated.</p>