title: using swiper js to create a history timeline with multiple slides in each year
body: <p>i'm using Swiper JS and i'm struggling to find a way in which I can remove duplicates from the pagination. I want the ability to have a slide for each year with content inside, but also have multiple slides for a particular year - BUT only writing 1 pagination for it (with the nav/swipe working). </p>
  
  <p>So if the slides where:</p>
  
  <p>1989, 1990, 1992, 1992, 1992</p>
  
  <p>Then the pagination would show as:</p>
  
  <p>1989, 1990,  1992</p>
  
  <p>(also the swipe and left/right arrows would work with this and scroll through all slides not missing any, but staying on the 1992 for each duplicate).</p>
  
  <pre><code>&lt;div class="swiper-container"&gt;
      &lt;!-- Additional required wrapper --&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;!-- Slides --&gt;
          &lt;div class="swiper-slide" year="1989"&gt;Content&lt;/div&gt;
        &lt;div class="swiper-slide" year="1990"&gt;Content&lt;/div&gt;
        &lt;div class="swiper-slide" year="1992"&gt;Content&lt;/div&gt;
                    &lt;div class="swiper-slide" year="1992"&gt;Content&lt;/div&gt;
                    &lt;div class="swiper-slide" year="1992"&gt;Content&lt;/div&gt;
                 &lt;div class="swiper-slide" year="1993"&gt;Content&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- If we need pagination --&gt;
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
      &lt;!-- If we need navigation buttons --&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>
  
  <pre><code>var mySwiper = new Swiper ('.swiper-container', {
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
              clickable: true,
          renderBullet: function (index, className) {
            return '&lt;span class="' + className + '"&gt;' + (menu[index]) + '&lt;/span&gt;';
          },
      },
  
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  </code></pre>
  
  <p>Here is a clean example with the duplicate years:</p>
  
  <p><a href="https://codepen.io/nolimit966/pen/XWXNNqR" rel="nofollow noreferrer">https://codepen.io/nolimit966/pen/XWXNNqR</a> </p>
  
  <p>Things I have tried so far:</p>
  
  <p>Finding the duplicate years and removing them from the menu - The main problem with this is now is skips that slide.</p>
  
  <p>Removing the duplicate dom pagination element - this then looks broken when swiping though as theres a point when no pagination is highlighted.</p>
  
  <p>Can anyone help me to understand how I can achieve this?</p>