Timeline of content with jcarousellite

Question

I’m creating a timeline using jCarouselLite, but it’s a bug when I advance to a new decade. For example:

In the gray arrows I can navigate to other dates, and in the colored jumps to another decade.

The bug would be the following: when I am in the decade (for example) of 80 and select some year (example: 1985), when I move to the next decade, I would like it to start in 1995 and not in 1990.

If I’m in 1982 and I advance a decade, I want it to start in 1992 and not 1990.

I will show in the example:

And

Follows a code part of my HTML code:

<div class="reconhecimento anos-80" id="ano-80">

  <ul>
    <li>
      <h2 class="oitenta">1980</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>
    </li>

    <li>
      <h2 class="oitenta">1981</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="oitenta">1982</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="oitenta">1983</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="oitenta">1984</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="oitenta">1985</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>
  </ul>
</div> <!-- reconhecimento -->

<div class="reconhecimento anos-90" id="ano-90">

  <ul>
    <li>
      <h2 class="noventa">1990</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>
    </li>

    <li>
      <h2 class="noventa">1991</h2>
      <a id="foto" href="files/timeline-80.png">
        <img src="files/timeline-80.png" />
      </a>    
    </li>

    <li>
      <h2 class="noventa">1992</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="noventa">1993</h2>
      <a id="foto" href="files/timeline-80.png">
        <img src="files/timeline-80.png" />
      </a>    
    </li>

    <li>
      <h2 class="noventa">1994</h2>
      <a id="foto" href="files/timeline-70.png">
        <img src="files/timeline-70.png" />
      </a>    
    </li>

    <li>
      <h2 class="noventa">1995</h2>
      <a id="foto" href="files/timeline-80.png">
        <img src="files/timeline-80.png" />
      </a>    
    </li>
  </ul>
</div> <!-- reconhecimento -->

JS:

$("#ano-80").jCarouselLite({
  btnNext: ".anos-proximo",
  btnPrev: ".anos-anterior",
  circular: true

});

$("#ano-80").jCarouselLite({
  btnNext: ".anos-proximo",
  btnPrev: ".anos-anterior",
  circular: true

});


$("#ano-70").jCarouselLite({
  btnNext: ".anos-proximo",
  btnPrev: ".anos-anterior",
  circular: true

});

$("#ano-90").jCarouselLite({
  btnNext: ".anos-proximo",
  btnPrev: ".anos-anterior",
  circular: true

});