0

Quisiera saber si se puede hacer un slide-show modificando el padding del contenedor de las imágenes. Es decir, cuando se le vaya dando click al botón de siguiente, que el contenedor de las imágenes vaya adquiriendo un padding mayor para que se posicionen una a una las imágenes y que cuando llegue a la imagen final que se haga un bucle para que regrese a la inicial.

No sé si se podrá, he intentado pero solo se he hecho que se muevan 2 imágenes y no se como hacer que se muestren una por una cuando se le de click a los botones.

function init() {
  document.getElementById("btn_next").onclick = siguiente;
  document.getElementById("btn_prev").onclick = Izquierda;
}
init();

function siguiente() {
  document.getElementById("cont_img").style.paddingLeft = "400px";
}

function Izquierda() {
  document.getElementById("cont_img").style.paddingLeft = "1200px";
}
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.centrarflex {}

.main_conten {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 400px;
  border: 3px solid black;
}

.group {
  display: flex;
  background: blue;
  transition: 0.5s;
  padding-left: 1200px;
}

.btn_prev {
  cursor: pointer;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: black;
  position: absolute;
  transform: translate(-170px, 170px);
  border-radius: 50%;
  color: white;
}

.btn_next {
  display: flex;
  cursor: pointer;
  font-size: 35px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: black;
  position: absolute;
  transform: translate(170px, 170px);
  border-radius: 50%;
  color: white;
}
<div class="centrarflex">
  <div class="main_conten">
    <div id="cont_img" class="group">
      <img id="imagen1" src="https://i.pinimg.com/originals/61/37/a0/6137a0b858af6cec81cc5910467d21ad.jpg" alt="sskama">
      <img id="imagen2" src="https://pm1.narvii.com/6465/442c541129a5d1b1bba6221872e85dcf41b775f4_hq.jpg" alt="sskama">
      <img id="imagen3" src="http://pm1.narvii.com/6055/2eae41d4253b0a9296d9c14e4df90ae5833e7352_hq.jpg" alt="sskama">
      <img id="imagen4" src="https://pm1.narvii.com/6567/84b9b654e31c3f1071cf8c77f760533e4e855f65_hq.jpg" alt="sskama">
    </div>
    <div id="btn_prev" class="btn_prev"> ← </div>
    <div id="btn_next" class="btn_next"> → </div>
  </div>
</div>

2
  • estas reescribiendo la funcion onClick, deberias de cambiar la siguiente linea a : document.getElementById("btn_next").onclick(siguiente); Commented el 23 sept. 2019 a las 0:48
  • Hola @JackNavaRow, lo que está haciendo el compañero es usar la propiedad onclick (que por defecto no está definida), en este caso no está usando el método click o algún otro método o función.
    – ElChiniNet
    Commented el 23 sept. 2019 a las 6:10

1 respuesta 1

0

Lo que quieres hacer es posible, lo que te recomendaría usar mejor transformaciones CSS en vez de padding, ya que el primero logra animaciones más fluidas debido a que usa la GPU si está disponible.

Tu ejemplo solo funciona con dos imágenes porque solo tienes dos valores en tu código, uno cuando haces click en siguiente y otro cuando haces click en izquierda. Si quieres que funcione con todas las imágenes, y para evitar tener que crear condiciones con diferentes valores para cada imagen, lo mejor es que dinámicamente se generen los valores que se necesitan utilizar al inicio, se guarden en un array, y utilizar dicho array para aplicar esos valores cada vez que se haga click en siguiente o izquierda.

He variado un poco el código CSS para hacerlo más conciso.

var container = document.getElementById('cont_img');
var images = container.querySelectorAll('img');
var total = images.length;
var transforms = Array.apply(this, {length: total}).map((img, i) => `translateX(${-i * 400}px)`);
var index = 0;

function siguiente() {
  index++;
  if (index === total) { index = 0; }
  container.style.transform = transforms[index];
}

function izquierda() {
  index--;
  if (index < 0) { index = total - 1; }
  container.style.transform = transforms[index];
}

document.getElementById("btn_next").onclick = siguiente;
document.getElementById("btn_prev").onclick = izquierda;
* {
  margin: 0;
  padding: 0;
}

.main_conten {
  border: 3px solid black;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 400px;  
}

.group {
  display: flex;
  justify-content: flex-start;
  transition: transform 0.5s;
  padding-left: 0;
}

.btn_prev,
.btn_next {
  align-items: center;
  background: black;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: 35px;
  height: 50px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
}

.btn_prev { left: 0; }
.btn_next { right: 0; }
<div class="centrarflex">
  <div class="main_conten">
    <div id="cont_img" class="group">
      <img id="imagen1" src="https://i.pinimg.com/originals/61/37/a0/6137a0b858af6cec81cc5910467d21ad.jpg" alt="sskama">
      <img id="imagen2" src="https://pm1.narvii.com/6465/442c541129a5d1b1bba6221872e85dcf41b775f4_hq.jpg" alt="sskama">
      <img id="imagen3" src="http://pm1.narvii.com/6055/2eae41d4253b0a9296d9c14e4df90ae5833e7352_hq.jpg" alt="sskama">
      <img id="imagen4" src="https://pm1.narvii.com/6567/84b9b654e31c3f1071cf8c77f760533e4e855f65_hq.jpg" alt="sskama">
    </div>
    <div id="btn_prev" class="btn_prev"> ← </div>
    <div id="btn_next" class="btn_next"> → </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.