link last slide to next date

Question

I’m making website and this link http://atomica.com.br/clientes/usinavertente/site/nossa-historia.php after I finished the client is asking so that when arriving at the last slide of each date go to next date, but I could not adapt to what was already done someone has some tip 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 TAB

<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>

SLIDE SCRIPT

<script>
    jQuery(document).ready(function($) {
        $('.my-slider').unslider();
        infinite:true;
    });
</script>

Answer 1

Well, I took a quick look at the library documentation you’re using, and I believe something like the following might work :

From what I’ve seen this library "unslider" is implementing the Infinite regardless of what you do, so it’s a little complicated to determine when the end has been reached.

One output is to use a variable to save where the call is coming from.

 var ultimoIndex = 0;

var unslider =  $('.my-slider').unslider();
        //infinite:true;   <--- Creio que aqui tenha um erro de sintax, o certo seria usar dentro do .unslider({infinite: true}) mas infinito não é mais o que você quer.
unslider.on('unslider.change', function(event, index, slide) {
    if((index - ultimoIndex) > 1){ significa que o slide pulou uma casa, ou seja deu uma volta completa, já que o passo normalmente é de 1
      if(index > ultimoIndex){  // Clicou próximo
        $('a.pager-next').click();
      }else{
         $('a.pager-prev').click();
       }
     } 
       ultimoIndex = index;

});