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>