1

Lo que necesito es hacer una especie de paginado pero solo con botones de atrás y adelante y que me muestre solo de a dos divs, tengo el siguiente código, pero este solo muestra de a un solo div a la vez:

$(document).ready(function(){
      $(".divs div.panel").each(function(e) {
          if (e != 0)
              $(this).hide();
    
      } );
    
      $("#next").click(function(){
          if ($(".divs div.panel:visible").next().length != 0)
              $(".divs div.panel:visible").next().show().prev().hide();
          else {
              // $(".divs div.panel:visible").hide();
              // $(".divs div.panel:first").show();
          }
          return false;
      });
    
      $("#prev").click(function(){
          if ($(".divs div.panel:visible").prev().length != 0)
              $(".divs div.panel:visible").prev().show().next().hide();
          else {
    
              // $(".divs div.panel:visible").hide();
              // $(".divs div.panel:last").show();
          }
          return false;
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
        <div class="panel">1</div>
        <div class="panel">2</div>
        <div class="panel">3</div>
        <div class="panel">4</div>
        <div class="panel">5</div>
        <div class="panel">6</div>
        <div class="panel">7</div>
    </div>
    <a id="prev">prev</a>
    <a id="next">next</a>

Si alguien pudiera ayudarme a que mostrara de a dos divs cada vez sería genial!

Gracias de antemano!

1 respuesta 1

2

Puedes utilizar una variable para almacenar la posición actual y, en función de esta, ir calculando los divs a mostrar:

$(document).ready(function() {
  var current = 0;
  var $divs = $(".divs div.panel");
  
  function show(index){
    current = index;
    var next = $divs.length <= current + 1 ? 0 : current + 1;
    for (var i = 0; i < $divs.length; i++){
      (i === current || i === next)
        ? $($divs[i]).show()
        : $($divs[i]).hide();
    }
  }

  $("#next").click(function() {
    next = current + 2;
    if ($divs.length <= next){
      next = next - $divs.length;
    }
    show(next);
    return false;
  });

  $("#prev").click(function() {
    prev = current -2;
    if (prev < 0){
      prev = $divs.length + prev;      
    }
    show(prev);
    return false;
  });
  
  show(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
  <div class="panel">4</div>
  <div class="panel">5</div>
  <div class="panel">6</div>
  <div class="panel">7</div>
</div>
<a id="prev">prev</a>
<a id="next">next</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.