Content timeline with jcarousellite

1

I am creating a timeline using jCarouselLite, however it has a bug when I move to a new decade. For example:

Onthegrayarrows,Icannavigatetootherdates,andinthecoloredonesjumptoanotherdecade.

Thebugwouldbethis:whenI'minthe80'sdecadeandselectsomeyear(example:1985),whenImoveintothenextdecade,I'dlikeittostartin1995ratherthanin1990.

IfI'min1982andadvancingadecade,Iwantittostartin1992ratherthan1990.

I'llshowintheexample:

E

Here'sapartofmyHTMLcode:

<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

});
    
asked by anonymous 01.03.2016 / 19:14

0 answers