Estoy usando la biblioteca Owl Carrousel en un proyecto de ensamblaje web, el carrusel funciona bien para mí cuando las imágenes son estáticas:

 <img class="rounded-1 img-fluid" src="Img/CP5.png" alt="" / >

El problema surge cuando quiero que las imagenes sean dinamicas y provengan de la base de datos, no se muestra el carrusel y cuando se muestra no funciona como debe, se pierden todos los estilos y funcionalidad, me podrian ayudar con esto por favor .

esta es mi clase donde almaceno las imágenes en la base de datos:

 public class Carrusel { public int CarruselId { get; set; } public string Imagen { get; set; } }

en mi página blazor tengo esto:

 @if (ListadeCarrusel != null) { <div class="owl-carousel owl-theme"> @foreach (var item in ListadeCarrusel) { <div style="height:300px; width:100%;"> <img class="rounded-1 img-fluid" src="@item.Imagen" alt="" /> </div> } </div> } @code{ protected override async Task OnInitializedAsync() { await CargarCarrusel(); } public List<Carrusel> ListadeCarrusel { get; set; } private async Task CargarCarrusel() { var responseHttp = await repositorio.Get<List<Carrusel>>($"api/Carrusel"); if (!responseHttp.Error) { ListadeCarrusel = responseHttp.Response; } } protected async override Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JS.InvokeVoidAsync("OwlCarousel"); firstRender = false; StateHasChanged(); } } }

en el archivo js tengo esto:

 function OwlCarousel() { $(".owl-carousel").owlCarousel({ loop: true, items: 1, nav: false, autoplay: true, dots: true, autoHeight: true }); };

Creo que el div con la clase carrusel owl, al estar dentro del if, no toma el css y funcionalidades que lo hacen funcionar bien, pero no estoy seguro, no tengo idea de que esta pasando