0

Estou fazendo site e neste link http://atomica.com.br/clientes/usinavertente/site/nossa-historia.php depois que eu terminei o cliente está pedindo pra que quando chegar no ultimo slide de cada data ir pra próxima data, mas não consegui adaptar para o que já estava feito alguém tem alguma dica pra dar?

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

<script>
    jQuery(document).ready(function($) {
        $('.my-slider').unslider();
        infinite:true;
    });
</script>
6
  • Por favor, se possível complemente a pergunta com os trechos de código pertinentes à essa parte do seu projeto,para podermos lhe dizer como fazer, é necessário saber como você está fazendo. Está usando alguma biblioteca em Jquery ? 5/12/2016 às 18:43
  • lucas queiroz Veja se está bom agora
    – user4451
    5/12/2016 às 19:10
  • Sim, nunca trabalhei com essa biblioteca, irei dar uma resposta se não funcionar me avise que vou tentando modificar 5/12/2016 às 19:23
  • Lucas queiroz Eu tive que usar duas pq não estava conseguindo dar todas funções que eu precisaria, eu não sou mto bom de back-end sou mais front
    – user4451
    5/12/2016 às 19:29
  • Respondi, porém só pra complementar, Javascript é Front-End :) kkkkk 5/12/2016 às 19:45

1 Resposta 1

0

Bom, dei uma rápida olhada na documentação da biblioteca que você está usando, e acredito que algo como o seguinte pode funcionar :

Pelo que vi essa biblioteca "unslider" está implementando o infinite independente do que você faça, desta forma é um pouco complicado determinar quando o fim foi atingido.

Uma saída é usar uma variável pra guardar de onde a chamada está vindo.

 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;

});
2
  • Não está funcionando veja se está correto jQuery(document).ready(function($) { $('.my-slider').unslider(); //infinite:true; var ultimoIndex = 0; var unslider = $('.my-slider').unslider(); 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; });
    – user4451
    5/12/2016 às 20:10
  • O que acontece ? tenta com o console aberto e me diga se tem algum erro, se possível coloque um console.log dentro dos if pra sabermos se está caindo na condição, se o evento está sendo chamado (peguei esse evento na documentação, não testei) 6/12/2016 às 12:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .