how to fix vertically stacked repeats of content type images

Hello,

The module supports two display modes:
Hero Slide Mode – This requires a specific field type, and the image field must be limited to one image only.
View Mode Integration – This allows you to use any defined view mode.

Please note: the module includes its own Twig template. If any other module or theme overrides this default template, the slideshow will not function correctly.

To verify which template is being used, follow these steps:

Enable Twig debugging.
Inspect the page source and look for the template suggestions in the HTML comments.
Ensure no other template is overriding the one provided by this module.

<!-- BEGIN OUTPUT from 'modules/contrib/vvjs/templates/views-view-vvjs.html.twig' -->
<!-- BEGIN OUTPUT from 'modules/contrib/vvjs/templates/views-view-vvjs-fields.html.twig' -->

You can see examples of both display types on the demo site:
https://unitedstarsofamerica.com/vanilla-views/views-vanilla-javascript-...

By default, you should see a working version similar to the examples shown there.

Best regards,
Alaa

Thanks for suggestions, Alaa. But sorry, I am not understanding exactly how to inspect the twig inspection thing. Can you provide a Mac Terminal command for twig debugging and to reveal other relevant factors? The site theme in use is DXPR Theme 6.0.5. Does that tell you anything about a possible conflict? BTW, the link provided as demo site is not working, and generates a Page Not Found.

Hello,

You can enable the twig debug through the Drupal UI

Go to: https://your-site.com/admin/config/development/settings
Under Twig Development Mode, check the following boxes:
☑️ Twig debug mode
☑️ Disable Twig cache
☑️ Do not cache markup
Click Save configuration and clear caches.
Then open your site in a browser → Right-click → "View Page Source" → Search for

.
You'll see detailed comments showing:

Important Note for DXPR and Layout Builder Themes
The vvjs module provides its own templates to ensure correct rendering of the slideshow.

However, some themes like DXPR may override or suppress default Views template suggestions, particularly when using their own layout builder or dynamic block region system.

If your theme still overrides the rendering or you want to customize the slideshow:
Copy these two files from the module:

modules/contrib/vvjs/templates/vvjs-internal.html.twig
modules/contrib/vvjs/templates/vvjs-fields-internal.html.twig

Rename them to match your view name using standard Views suggestions:

views-view--yourviewname.html.twig
views-view-fields--yourviewname.html.twig

Place them in your theme at: themes/custom/YOUR_THEME/templates/views/
then clear caches.

BTW, the link provided as demo site is not working, and generates a Page Not Found. m not sure why it's not working for you. I just clicked the link and it's working on my end.
You can also access the demo by visiting https://unitedstarsofamerica.com and navigating to the Views Vanilla section; the demo link is available there.

Best wishes,
Alaa

Alaa, I have enabled the options
☑️ Twig debug mode
☑️ Disable Twig cache
☑️ Do not cache markup
and see code matching the example you provide (excepting that I don't currently have the Hero option enabled).
But it's not clear to me how this can be used to resolve the issue. I assume the DXPR theme is disrupting the VVJS template, as suggested. In regard to the changes that followed, involving modifed .twig files, the instructions seem incomplete but maybe I'm just not getting it. Do you mean to make a full duplicate of the DXPR theme fileset, rename it and put in a themes/custom folder, and replace the 2 modified .twig files there? Then enable this theme as the default?
It seems like a lot of extra steps to get the slideshow working properly. Would this be avoided if using a different theme, not DXPR?

Hello,

To confirm if the issue is theme-related, try switching to the Olivero theme (included with Drupal). If the slideshow works there, it means the current theme is interfering with the VVJS templates.

You do not need to copy the entire theme. If you're using a custom theme in the themes/custom folder, you can place the two template files directly there and rename them according to your view.

If your theme is in themes/contrib, then it's best to create a sub-theme and place the renamed templates inside it.

Theming Views: https://drupalize.me/tutorial/overview-theming-views
How to Create Sub-Theme: https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/s... →

Best,
Alaa