Skip to main content

Transladar Trasladar div con animación en cssCSS o jsJavaScript

Tengo un slider realizado con cssCSS de 3 imagenesimágenes y algo de texto que se pasa de forma automaticaautomática con una animación.

He creado unos botones de texto que al dar click, haga left:aplica la propiedad -100pxleft: -100px, pero no me funcionaaplica 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
         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>

Transladar div con animación en css o js

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, 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>

Trasladar div con animación en CSS o JavaScript

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>

se añadieron 4 caracteres en el cuerpo
Origen Enlace
Pelukosa
  • 1.3k
  • 4
  • 20
  • 48

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, 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"onclick="sliderAtras()" id="btnAtras">ATRAS</div>
  <div onclick="sliderAdelante"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>

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, 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>

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, 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>

se eliminaron 94 caracteres en el cuerpo
Origen Enlace
Pelukosa
  • 1.3k
  • 4
  • 20
  • 48

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, este es mi código

function sliderAtras(){
    var atras = document.getElementById("btnAtras");
    atrasvar slideshow = document.getElementById("slideshow");
    slideshow.style.left = "-100px";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">class="slideshow" id="slideshow">
      <div class="slide_one slide-2"><img src="#" />
        <h1 class="h1-slider">Lavamanos portatil autónomo<slider">Titulo</h1>
        <h2 class="h2-slider">Tan sólo 441€!<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">Balanzas en oferta<slider">Titulo</h1>
        <h2 class="h2-slider">Últimas unidades<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">Fabricador de hielo<slider">Titulo</h1>
        <h2 class="h2-slider">Ofertas por cambio de exposición!<slider">Texto</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
    </div>
  </div>
</div>

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, este es mi código

function sliderAtras(){
    var atras = document.getElementById("btnAtras");
    atras.style.left = "-100px"; 
}
.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">
      <div class="slide_one slide-2"><img src="#" />
        <h1 class="h1-slider">Lavamanos portatil autónomo</h1>
        <h2 class="h2-slider">Tan sólo 441€!</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
      <div class="slide_two slide-2"><img src="#" />
        <h1 class="h1-slider">Balanzas en oferta</h1>
        <h2 class="h2-slider">Últimas unidades</h2>
          <a href="#" class="boton-rojo">
            Ver más
          </a>
      </div>
      <div class="slide_two slide-2">
        <img src="#" />
        <h1 class="h1-slider">Fabricador de hielo</h1>
        <h2 class="h2-slider">Ofertas por cambio de exposición!</h2>
        <a href="#" class="boton-rojo">Ver más</a>
      </div>
    </div>
  </div>
</div>

Tengo un slider con css de 3 imagenes y algo de texto que se pasa de forma automatica con una animación

He creado unos botones de texto que al dar click, haga left: -100px pero no me funciona, 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>

Origen Enlace
Pelukosa
  • 1.3k
  • 4
  • 20
  • 48
Loading