For anyone still having trouble with this, I found a slight workaround for this. Basically you have the fllippable card inside of the carousel. It's not perfect but it definitely works!

When the page loads, have it create a list of the documents you want to show. I use a custom action here to pull a previously built list of the user's progress but it depends on your requirements. Then have it update a local page state variable list of document reference list (flashcards) with that list. Set a \"current flashcard\" local page state variable document reference (flashcards) as the first in that list. Ensure you only have one page on your Carousel and it loops. Wrap it in a container and query the flashcards collection and filter where the refId is equal to the current flashcard page state variable you just set. Have the front be the term, the back be the definition. On button action, widget interaction, carousel, next. This is effectively the part where it goes to the next in the carousel where it is not flipped to the back. Have it remove the item at index first or 0 from the list, then add it to the back. Then update the current flashcard with the new item at index first or 0 in the list. This will change the flashcard shown.

Because I keep the progress of all my users, I have it query the userProgress collection where topicRef = topic and update the list with the local page state variable list.

This seems more complicated than it is but it works great. The user can still flip through the carousel but it'll only show that one flashcard.

How can I create a custom action built to trigger the flip in a flippable card?