I recently integrated a plugin called flip-carousel.js into my website and here is an example of how it looks on the site.
Check out the sample implementation
Now, I encountered an issue when trying to use multiple instances of the same plugin. When initializing the plugin, the code looks like this:
$('article').flipcarousel({
pagination: false,
loader: true,
itemsperpage: 3,
randomizer: 0.7
});
To have multiple instances, I opted to use classes instead of elements. The plugin works by taking a list of elements and transforming them with injected elements along with the content in the HTML tags. Below is the code for implementing multiple instances:
var roomTypes = hotelData.getSelectedRoomTypeIds();
roomTypes.forEach(function(e){
if($('.flip_article_' + e.toString()).length > 0){
$('.flip_article_' + e.toString()).flipcarousel({
pagination: false,
loader: true,
itemsperpage: 3,
randomizer: 0.7
});
}
})
In this setup, I first created a series of elements with specific class names (e.g., flip_article_1210). I then loop through these elements to initialize the plugin. However, the problem arises when setting up the second carousel instance - it gets initialized but does not display any element items. I tried delving into the plugin code for modifications, but hit a dead end.
One idea I had was that the plugin relies on a parent class named flip-carousel where everything is appended to. If each carousel could have a unique parent class, perhaps it would work better. But, unfortunately, other methods are dependent on this structure.
If anyone can provide assistance or insights on this issue, I've included the source link to the plugin below. Your help would be greatly appreciated.