Estoy tratando de crear este carrusel en Angular con varios elementos, pero al hacer clic en cada elemento, la pestaña debería mostrarse en todo el ancho de la página.

He usado owl-carousel de https://www.npmjs.com/package/ngx-owl-carousel-o Funciona bien, el control deslizante funciona bien, el problema ahora es que el contenido está dentro (consulte la imagen a continuación ) el elemento ocupa solo esa cantidad de ancho. Para que se pueda expandir en todo el ancho, necesito sacar el contenido del control deslizante y necesito ayuda en eso, ya que soy un novato en angular.

Tema:

Tratando de lograr:

Solución temporal:

 toggleDisplay(divVal: string) { console.log(divVal) if(divVal == 'Weekly'){ this.weeklyDiv = !this.weeklyDiv; this.cdhDiv = false; this.csLiteDiv = false; this.tsaLiteDiv = false; this.tsamDiv = false; } if(divVal == 'CDH'){ this.cdhDiv = !this.cdhDiv; this.weeklyDiv = false; this.csLiteDiv = false; this.tsaLiteDiv = false; this.tsamDiv = false; } if(divVal == 'CS'){ this.csLiteDiv = !this.csLiteDiv; this.cdhDiv = false; this.weeklyDiv = false; this.tsaLiteDiv = false; this.tsamDiv = false; } if(divVal == 'TSA'){ this.tsaLiteDiv = !this.tsaLiteDiv; this.cdhDiv = false; this.csLiteDiv = false; this.weeklyDiv = false; this.tsamDiv = false; } if(divVal == 'TSAM'){ this.tsamDiv = !this.tsamDiv; this.cdhDiv = false; this.csLiteDiv = false; this.tsaLiteDiv = false; this.weeklyDiv = false; }

}

Entiendo que no es una buena práctica y se puede refinar, tenga la amabilidad de ayudar con una solución adecuada o si ya conoce algún control deslizante de este tipo, compártalo.

Gracias,