I'm doing site and in this link link after I finished the client is asking so that when I get on the last slide of each date I go to the next date, but I was not able to adapt to what was already done, does anyone have any tips to give?
HTML
<div class="datas">
<div class="container">
<div class="controle">
<a href="javascript:;" class="pager-prev">-</a>
<a href="javascript:;" class="pager-next">+</a>
</div>
<ul class="menu">
<li><a href="" title="2003" data-slide-index="0">2003</a></li>
<li><a href="" title="2004" data-slide-index="1">2004</a></li>
<li><a href="" title="2006" data-slide-index="2">2006</a></li>
<li><a href="" title="2008" data-slide-index="3">2008</a></li>
<li><a href="" title="2010" data-slide-index="4">2010</a></li>
<li><a href="" title="2012" data-slide-index="5">2012</a></li>
<li><a href="" title="2014" data-slide-index="6">2014</a></li>
<li><a href="" title="2016" data-slide-index="7">2016</a></li>
</ul>
<ul class="bxslider">
<li>
<div class="my-slider">
<ul>
<li><h3>Captação de água industrial (Rio Grande)</h3><img src="img/2003-1.jpg.png" alt="Captação de água industrial (Rio Grande)"></li>
<li><h3>Construções Civis</h3><img src="img/2003-2.jpg.png" alt="Construções Civis"></li>
<li><h3> Montagem</h3><img src="img/2003-3.jpg.png" alt=" Montagem"></li>
<li><h3>Montagem (vista aérea geral)</h3><img src="img/2003-4.jpg.png" alt="Montagem (vista aérea geral)"></li>
</ul>
</div>
</li>
<li>
<div class="my-slider">
<ul>
<li><h3> Início da produção do Álcool e Açúcar</h3><img src="img/2004-1.jpg.png" alt=" Início da produção do Álcool e Açúcar"></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
SCRIPT FOR ABA
<script>
$(window).load(function(){
var slider = $('.bxslider').bxSlider({
pagerCustom: '.menu'
});
$('a.pager-prev').click(function (e) {
var current = slider.getCurrentSlide();
slider.goToPrevSlide(current) - 1;
e.preventDefaut();
});
$('a.pager-next').click(function (e) {
var current = slider.getCurrentSlide();
slider.goToNextSlide(current) + 1;
e.preventDefaut();
});
return false;
});
</script>
SCRIPT FOR SLIDES
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
infinite:true;
});
</script>