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
});