I’m using the carousel of Flowbite. It works as it should in Safari and Chrome if I just copy/paste it and change the stuff hardcoded. Now I don’t want to change it hardcoding all the time, so I use a CMS Sanity. In VueJS i receive the Data with Axios perfectly.
What I see what is happening, in both Safari and Chrome, is; Page renders, including the Flowbite JS => Axios is receives data => Axios Places the data in place.
The carousel gets its data from Sanity, images(links) in this case. When Axios receives the data, the carousel isn’t working, because Flowbite is already executed.
The data(html ) is there only Flowbite JS is already executed, so it doesn’t read it.
Now the strange part for me is, in Chrome when this is happening for some reason it works after waiting a little bit. But in Safari, I get the Error that there is no Data to render for the carousel.
The website is online, so if you wan’t to try it out and see it for yourself, this is the link. It is the review part. I added under the footer a hardcoded Carousel, that was when I tested it A/B.
I also used the V-if in the vue div section where i’m using the carousel, only the Flowbite doesn’t reload after Axios is finished.
So in the end, my question, is there a way to solve this? Or are there other Carousel you recommend for vue?