metodo - jquery not working after ajax

jquery slide div dentro de un div

Question

Tengo un elemento contenedor div, este debe contener todos los elementos div hijos. Vi este hilo: deslice una div fuera de pantalla usando jQuery y me preguntaba cómo implementarlo (dentro de un elemento div y no en el cuerpo). El código está funcionando bien, pero ¿y si el elemento div "envoltorio" tiene 500 píxeles de ancho, ¿cómo se supone que debo envolver los divs secundarios? ¿Debo usar iframe o ...?

Para una mejor comprensión hice esta imagen:

El rectángulo rojo sería una ventana y el fondo gris la pared. Solo puede ver a través de la ventana y ver el elemento div actual. Si presionas el botón derecho -aqua-, verás el div verde y si presionas el botón izquierdo verás el div amarillo.

Aviso: los elementos Div deben moverse y no la pared.

Answer 1

Agregue los tres div en un contenedor div, luego haga que la ventana se enrolle alrededor del div largo y oculte el desbordamiento.

Ejemplo si el área de la ventana es 960px, entonces el div interior sería 3x 960 (2880)

Puede centrarlo cambiando su posición izquierda por incrementos de 960 (colocando el div largo en posición relativa y la ventana para desbordar a oculto)

#window{
width:960px;
overflow: hidden;
}

#container{
position: relative;
left: -960px;
}

.content_box{
width:960px;
}

Luego puede usar javascript (jQuery) para animar la posición izquierda:

$(''#arrow-left'').click(function() {
  $(''#container'').animate({
   left: ''-=960''
  }, 5000, function() {
  // Animation complete.
  });
});


$(''#arrow-right'').click(function() {
  $(''#container'').animate({
   left: ''+=960''
  }, 5000, function() {
  // Animation complete.
  });
});

Se puede encontrar más información sobre .animate en el manual: http://api.jquery.com/animate/

Answer 2

<div id="parent">
  <div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
</div>

darle al padre propiedades div div css:

position: relative;
overflow: hidden;
width: 500px;
height: somevalue;

envuelva los divs hijos con otro div "contenedor por ejemplo" y asígnele las siguientes propiedades css:

position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/

y finalmente para los niños divs:

float: left;
height: ;/*same as parent*/

Answer 3

jQuery para la lógica y CSS3 para transition y transform .
Varias galerías + Desplazamiento automático + Pausa al desplazarse:

$(function(){

  $(''.gallery'').each(function() {

    var $gal     = $(this),
        $movable = $(".movable", $gal), 
        $slides  = $(">*", $movable),
        N        = $slides.length,
        C        = 0,
        itv      = null;
    
    function play() { itv = setInterval(anim, 3000); }
    function stop() { clearInterval(itv); }
    function anim() {
      C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
      $movable.css({transform: "translateX(-"+ (C*100) +"%)"});
    }
    
    $(".prev, .next", this).on("click", anim);
    $gal.hover(stop, play);
    play();

  });

});

.gallery{
  position: relative;
  overflow: hidden;
}
.gallery .movable{
  display: flex;
  height: 70vh;
  transition: transform 0.4s;
}
.gallery .movable > div {
  flex:1;
  min-width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pause on hover and autoslide

<div class="gallery">
  <div class="movable">
    <div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
    <div style="background:#af9">2</div>
    <div style="background:#f0a">3</div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

As many galleries as you want

Cuente el número de diapositivas y colóquelo en un contador C
En prev / siguiente haga clic en manipular C
En autoslide $(this).is(".prev") también se evaluará como false por lo que se utilizará ++C , como hacer clic en el botón Siguiente .
En mouseenter simplemente clearInterval el itv que se está ejecutando actualmente y en mouseleave (el segundo argumento .hover ) reinicializa el itv

La animación se logra al multiplicar C * 100 y translateX por - C * 100 %