Issue With Displaying Gallery Widget

Question

I am trying to add images product gallery to my custom widget using Fotorama. What it should look like: enter image description here

So I tried to initialize the gallery widget using the js script. Based on the info I got from https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_gallery.html. But for some reason, it is not displaying correctly. Am I missing something here?

This is how it looks like: (It is display 3 images all at once instead just one image) enter image description here

Any idea on how can I fix this? Thanks

Answer 1

So I figured it out after days of trying to fix this. The problem is because there is a css file that is not loaded properly.

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('mage/gallery/gallery.css')?>">

Adding the above code to my custom phtml fixed the issue.