On Refresh: huge first image appears then goes to 3,

Store Design
, , , , , , , ,

Topic summary

A Shopify store owner reports a visual glitch where the first carousel image briefly displays at nearly full-screen size on page load/refresh before correctly showing three images. This flash is particularly noticeable on desktop and may negatively impact user experience.

Proposed Solution:
A community member suggests several CSS and JavaScript fixes:

  • CSS adjustments: Set fixed carousel container height, hide all carousel items initially except the active one
  • JavaScript initialization: Ensure proper timing with DOMContentLoaded event to prevent layout shifts
  • Image optimization: Implement lazy loading attributes
  • Framework-specific fixes: Properly configure active slide classes if using Bootstrap or similar libraries

The issue appears to stem from CSS/JavaScript loading sequence, where styles apply after initial image render. The discussion remains open pending implementation and testing of the suggested fixes.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

When I refresh or first time to website a huge first image from the 1st image of carosel appears, then it goes to the 3 images. is it possible to disable this as it might draw users away.

my site is https://vazluxe.com

Please refresh you will see, especially on desktop!

Thsi image circled appears almost full screen, then it goes to the 3 images. its aquck flash but notciable.

huge.png
huge.png2368×1182 271 KB

2

Hey @Luxurymrkt ,

The issue where the first carousel image briefly appears full-screen before transitioning to the three-image layout is likely due to the way CSS and JavaScript handle initial loading. To fix this, follow these steps:

  1. Prevent the First Image from Stretching Full Screen

Add the following CSS to ensure the carousel maintains its intended layout from the start:

/* Ensure the carousel container has a fixed height */
.carousel {
  width: 100%;
  max-height: 400px; /* Adjust to match your intended design */
  overflow: hidden;
}

/* Ensure all carousel items are hidden initially */
.carousel-item {
  display: none;
}

/* Show only the active item on load */
.carousel-item.active {
  display: block;
}
  1. Modify How the Carousel Initializes

If you’re using a JavaScript-based carousel (e.g., Bootstrap or Slick), ensure that the first active slide is correctly set. For example, in Bootstrap:
  1. Ensure Smooth Loading of Images

Enable lazy loading to prevent images from loading in an unintended way:
  1. Adjust JavaScript Timing (If Needed)

If the issue persists, ensure that your carousel script doesn’t delay applying the correct styles:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".carousel-item").forEach((item) => {
    item.style.display = "none";
  });
  document.querySelector(".carousel-item.active").style.display = "block";
});

This will ensure the first image does not flash full screen before transitioning into the intended carousel layout. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat