1

Buen día a todos. Tengo un carousel que puede tener un número impar de figuras, quizá sea algo simple pero no comprendo como ajustarlas. He jugado con los ángulos y el ancho pero no logro resolverlo.

Si tengo una cantidad par de figuras por ejemplo 6 no hay problema: 6Figuras

Y si tuviera 5 figuras queda un espacio:

5Figuras

¿Hay alguna forma de ajustarlas para que el resultado se vea como si tuviera 6 figuras?

El ejemplo: Carousel Stackblitz

<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
  <div id="slideshow">
    <div class="entire-content">
      <div class="content-carrousel">
        <figure class="shadow">1</figure>
        <figure class="shadow">2</figure>
        <figure class="shadow">3</figure>
        <figure class="shadow">4</figure>
        <figure class="shadow">5</figure>
      </div>
    </div>
  </div>
</body>
</html>

#slideshow {
  margin: 0 auto;
  height: 600px;
  width: 100%;
}
.entire-content {
  margin: auto;
  width: 240px;
  perspective: 1200px;
  position: relative;
  padding-top: 80px;
  z-index: 1;
}
.content-carrousel {
  width: 100%;
  position: absolute;
  animation: rotar 15s infinite linear;
  transform-style: preserve-3d;
}
.content-carrousel figure {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.content-carrousel figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(240px);
}
.content-carrousel figure:nth-child(2) {
  transform: rotateY(60deg) translateZ(240px);
}
.content-carrousel figure:nth-child(3) {
  transform: rotateY(120deg) translateZ(240px);
}
.content-carrousel figure:nth-child(4) {
  transform: rotateY(180deg) translateZ(240px);
}
.content-carrousel figure:nth-child(5) {
  transform: rotateY(240deg) translateZ(240px);
}
.shadow {
  position: absolute;
  box-shadow: 0px 0px 20px 0px #000;
  text-align: center;
  font-size: 5rem;
}
@keyframes rotar {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
    z-index: 2;
  }
}

1
  • 1
    Ajusta la rotación para cubrir los 360 grados, actualmente rotas 60 grados cada elemento, al tener sólo 5 elementos, te estás quedando corto por 60. De todas formas, la solución real estaría en calcular la rotación de acuerdo al número de elementos, y establecer un número mínimo (por ejemplo 3) y uno máximo (digamos 12) de elementos en tu carrusel. Commented el 28 jun. 2021 a las 22:11

1 respuesta 1

0

Como mencionaba @Mauricio Contreras, tengo dos soluciones usando javascript y sass. Con javascript ejecuto una función que itera sobre cada hijo agregando la rotación según el incremento en grados. Dependiendo el número de hijos.

function startCarousel() {
  let nChild=document.getElementsByClassName('shadow');
  let iDegrees=360/nChild.length;
  for (let i of nChild) {
    document.querySelector('.content-carrousel figure:nth-child('+i.innerHTML+')')       
    .style.transform='rotateY('+i.innerHTML*iDegrees+'deg) translateZ(250px)';
  }
}

Y con sass sería algo similar, lo malo es que no se puede obtener el número de hijos de manera dinámica.

.content-carrousel {
  $iDegrees: 360deg / $nChild;
  @for $i from 1 through 5 {
    figure:nth-child(#{$i}) {
      transform: rotateY($i*$iDegrees) translateZ(250px);
    }
  }
}

Me gusta más la solución con sass aprovechando que estoy usando angular, pero por el momento no encuentro una manera de hacerlo como con javascript.

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.