He estado tratando de crear un carrusel simple con varios elementos.
La idea es usar la propiedad de transformación para mover la diapositiva del carrusel hacia la izquierda o hacia la derecha, según el botón en el que haga clic el usuario. Utilizo los métodos agregar y anteponer para lograr el efecto de "deslizamiento infinito".
Mi principal problema es que la propiedad de transición no se activa y el carrusel simplemente sigue pasando al siguiente elemento. Además, la consola registra un error que dice algo como "ha habido un error al cargar el valor de transformación" (no estoy pegando el error completo porque mi navegador no usa el inglés como idioma predeterminado). No estoy seguro de qué significa este error ya que el carrusel se mueve a pesar del error.
Estas son las funciones que se utilizan para utilizar el carrusel:
const slideWidth = document.querySelector('.carouselItem').clientWidth; let distance = 0; function moveToPrevious() { distance += slideWidth; carouselSlide.prepend(carouselSlide.lastElementChild); carouselSlide.style.transform = 'translateX(' + distance + 'px)'; } function moveToPrevious() { distance += slideWidth; carouselSlide.prepend(carouselSlide.lastElementChild); carouselSlide.style.transform = 'translateX(' + distance + 'px)'; }Todo el codepen: https://codepen.io/antonlovric/pen/OJxOyyL
Creo que es mejor usar una variable css en lugar de cambiar todo el valor de la propiedad, creo que es más claro:
.carouselSlide { display: flex; height: 100%; --translate-x: 0px; transition: 0.5s all ease-in; transform: translateX(var(--translate-x)); } function moveToPrevious() { distance += slideWidth; document .querySelector('.carouselSlide') .prepend(carouselSlide.lastElementChild); carouselSlide.style.setProperty('--translate-x', distance + 'px'); } vea que estoy configurando el valor de --translate-x en lugar de cambiar style.transform .
Con su código, la propiedad de transform ni siquiera cambia si inspecciona el elemento.
Aunque tiene otro problema que solucionar primero, después de corregir la transición de translateX, tiene un problema con CUÁNDO elimina elementos. Tan pronto como elimine el primer elemento para colocarlo al final del carrusel, el contenido se desplazará hacia la izquierda porque eliminó un elemento y eso no tendrá transición.
Tu algoritmo debería ser más complejo. Digamos que desea pasar al siguiente elemento, entonces:
Puede escuchar el evento transitionEnd para hacer eso.
Una cosa que sugeriría para simplificar la lógica es tener siempre un elemento adicional a la izquierda y un elemento adicional a la derecha, de esa manera siempre puede comenzar el algoritmo cambiando el valor de translateX y luego ajustando los elementos (si muestra los primeros 3 elementos, tendrás que hacer un algoritmo más complejo para volver a la diapositiva anterior)