3

Tengo un slider realizado con CSS de 3 imágenes y algo de texto que se pasa de forma automática con una animación.

He creado unos botones de texto que al dar click, aplica la propiedad left: -100px, pero no aplica dicha propiedad, este es mi código:

function sliderAtras(){
    var atras = document.getElementById("btnAtras");
    var slideshow = document.getElementById("slideshow");
    slideshow.style.left = "-100%"; 
}
.slideshow {
    width:300%;
    position: relative;
    animation: slide_animation 15s ease infinite;
}

.slide-2 {
    position: relative;
    float: left;
    width: 33.33%;
    overflow: hidden; 
}

.slideshow img{
    width: 100%;
}
#btnAtras, #btnAdelante{
    position:absolute;
    z-index: 999;
    cursor: pointer;
}
#btnAdelante{
    left: 500;
}
@-webkit-keyframes slide_animation {      
    0% {left:0%;}
    28% {left:0%}
    33% {left:-100%;}
    61% {left:-100%;}
    66% {left:-200%;}
    94% {left:-200%;}
    100% {left:0%;}
}
<div class="container-slider">
  <div class="slideshow_wrapper">
  <div onclick="sliderAtras()" id="btnAtras">ATRAS</div>
  <div onclick="sliderAdelante()" id="btnAdelante">ADELANTE</div>
    <div class="slideshow" id="slideshow">
      <div class="slide_one slide-2"><img src="#" />
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
      <div class="slide_two slide-2"><img src="#" />
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
          <a href="#" class="boton-rojo">Ver más</a>
      </div>
      <div class="slide_two slide-2">
        <img src="#" />
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
    </div>
  </div>
</div>

1 respuesta 1

1

Tu elemento slideshow tiene aplicada una animación infinita que modifica constantemente la propiedad left. Aunque modifiques dicha propiedad en JavaScript, dicha modificación será ignorada porque el elemento mientras se esté animando respetará los estilos aplicados por la animación.

Una solución sería que el elemento tenga algún tipo de transición en una propiedad específica y modificar dicha propiedad con JavaScript cada x tiempo. De esta manera, JavaScript estaría controlando el tiempo entre una imagen y la otra y podrías modificarlo cuando lo desearas.

Como mismo recomendé en esta pregunta, es preferible que uses transiciones CSS en vez de variar la posición left, tu animación será más fluida y suave de esta manera. Observa el siguiente snippet, al inicio se crea un array con todos los valores de estilo a usar dependiendo de la cantidad de imágenes, se asignan estos valores uno a uno usando un setTimeout, así que cuando se presiona el botón de adelante o atras, se resetea este setTimeout y se manda a aplicar el estilo correspondiente.

// Crear los pasos de animación teniendo en cuenta la cantidad de imágenes
var total = 3;
var steps = Array.apply(this, { length: total }).map(function(n, i) {
  return "translateX(" + (-i * 100 / total) + "%)";
});

var slideshow = document.getElementById('slideshow');
var tiempo = 5000;
var index = 0;
var delay;

function animate(value) {
  index = value !== undefined ? value : index + 1;
  if (index < 0) { index = total - 1; }
  if (index >= total) { index = 0; }
  slideshow.style.transform = steps[index];
  delay = setTimeout(animate, tiempo);
}

delay = setTimeout(animate, tiempo);

function sliderAtras() {
  clearTimeout(delay);
  animate(index - 1);
}

function sliderAdelante() {
  clearTimeout(delay);
  animate(index + 1);
}
.slideshow {
  left: 0;
  position: relative;
  transition: transform 2s ease;
  width: 300%;
}

.slide-2 {
  position: relative;
  float: left;
  width: 33.33%;
  overflow: hidden;
}

.slideshow img {
  width: 100%;
}

#btnAtras,
#btnAdelante {
  position: absolute;
  z-index: 999;
  cursor: pointer;
}

#btnAdelante {
  right: 10px;
}
<div class="container-slider">
  <div class="slideshow_wrapper">
    <div onclick="sliderAtras()" id="btnAtras">ATRAS</div>
    <div onclick="sliderAdelante()" id="btnAdelante">ADELANTE</div>
    <div class="slideshow" id="slideshow">
      <div class="slide_one slide-2">
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
      <div class="slide_two slide-2">
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
      <div class="slide_two slide-2">
        <h1 class="h1-slider">Titulo</h1>
        <h2 class="h2-slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
    </div>
  </div>
</div>

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.