0
320
VisualizaçõesLos elementos se repiten en un carrusel dinámico de múltiples diapositivas usando Angular
Tengo un problema con el carrusel que estoy creando porque los elementos se repiten después de cambiar el tamaño de la pantalla. Mi base de código proviene de la respuesta dada por Eliseo en esta pregunta de Stackoverflow donde su carrusel tiene la funcionalidad de mostrar/ocultar las funciones de flecha después de cambiar la variable noCarousel según las dimensiones de la pantalla del usuario y la cantidad de elementos para mostrar, esta funcionalidad presenta el detalle de que luego de ocultar las flechas los ítems se duplican y/o triplican
Código en Stackblitz:
https://stackblitz.com/edit/angular-1vnbxc-zc9fz8?file=src/app/app.component.html
Pasos para recrear el problema (2 formas):
- Si al abrir el código en Stackblitz el carrusel tiene la funcionalidad de las flechas activas, expanda la pantalla de muestra hasta que desaparezcan las flechas.
- Si al abrir el código en Stackblitz el carrusel tiene la funcionalidad de flechas inactivas, contraiga la pantalla de muestra hasta que se activen las flechas y luego expándala hasta que desaparezcan.
1 Respostas
Responde à pergunta0
es un poco complejo, el carrusel duplica las imágenes para permitir mostrar un poco en ambos lados cuando el tamaño es menor que el tamaño total.
La solución es almacenar en una matriz las "plantillas duplicadas"
Declarar una matriz vacía
added:EmbeddedViewRef<any>[]=[]Y, cuando agregue una "plantilla", use empujar para agregar a la matriz y si "noCarousel" elimínelo
private resizeCarousel() { if (this.carousel) { let totalWidth = this.carousel.nativeElement.getBoundingClientRect().width; if (totalWidth > this.slides.length * this.slideWidth) { .... this.noCarousel = true; this.added.forEach(x=>x.destroy()) return; } this.noCarousel = false; ... this.slides.last.viewContainer.createEmbeddedView( this.slides.last.templateRef ); this.slides.forEach((x, index) => { if (index && index >= this.slides.length - this.increment - count) { this.added.push( this.slides.first.viewContainer.createEmbeddedView(x.templateRef) ); } if (index < this.increment + count) { this.added.push( this.slides.last.viewContainer.createEmbeddedView(x.templateRef) ); } }); if (this.increment + 1 >= this.slides.length) { this.added.push( this.slides.first.viewContainer.createEmbeddedView( this.slides.first.templateRef, null, 0 ) ); } this.slides.first.viewContainer.createEmbeddedView( this.slides.first.templateRef ); this.currentSlide = 0; this.transitionCarousel(0, this.currentSlide); }Bifurqué tu stackblitz aquí
NOTA: Realmente es un stackblitz un poco viejo, no estoy muy seguro de si es la mejor solución para hacer un carrusel (si tengo tiempo, intentaré verificar más)