Hi everyone! I’m having trouble with my client’s website and need some help. I’m using a customized Luna theme on Bigcartel and there’s this really annoying flicker that happens every time the images change in the slider.
The flickering is pretty noticeable and it’s making the site look unprofessional. I’ve been trying to figure out what’s causing this but I’m stuck. I also heard that the newer versions of Luna theme actually use flexslider instead of bxslider now.
Should I consider switching to flexslider instead? Or is there a way to fix this flickering problem with the current bxslider setup? Any suggestions would be really appreciated!
honestly, i’d go with flexslider if ur theme already supports it. bxslider’s pretty outdated now, and that flickering usually comes from z-index conflicts or image preloading issues. flexslider handles transitions way smoother in my experience. just test it thoroughly first!
That flickering happens when the slider container height collapses during transitions. I’ve hit this on multiple Bigcartel projects - just set a fixed height on the .bx-wrapper class and it’ll fix it. Add min-height values that match your biggest image in your theme’s CSS. Also make sure all your images have the same aspect ratio, because mixed dimensions cause those annoying height jumps. Don’t jump to flexslider yet unless this doesn’t work. Luna’s bxslider is actually pretty solid once you get it configured right, and switching sliders usually breaks stuff with your existing customizations.
Had this exact issue on a Bigcartel site last year. The flickering happens because images aren’t preloaded before transitions kick in. Here’s what fixed it for me: add a short delay between slides and make sure all images have width/height attributes in your HTML. In your bxslider settings, bump up the pause duration and add preloadImages: 'all' to the config. Before you switch to flexslider, check your CSS z-index values on the slider container and slides - conflicting layers cause flickering too. You can definitely fix Luna theme’s bxslider with these changes.
The Problem:
You’re experiencing flickering in your Bigcartel website’s image slider when using a customized Luna theme. This flickering is likely due to inconsistent image loading times causing timing issues with the bxslider animations. The problem is exacerbated by variations in image sizes and potentially conflicts in CSS styling or z-index values.
Understanding the “Why” (The Root Cause):
The flickering isn’t necessarily a bug in bxslider itself, but rather a consequence of how images are loaded and rendered in relation to the slider’s animation timing. If images take longer to load than the slider’s transition speed, the slider’s container might briefly collapse or resize before the new image is fully displayed, creating the visible flicker. This is amplified when images have inconsistent dimensions (different aspect ratios), leading to unpredictable height changes in the slider container. Additional causes might include CSS conflicts impacting z-index values or improperly configured CSS transitions interfering with the slider’s animations. Simply switching to a newer slider (like flexslider) might not address the root cause unless the underlying image loading issues are resolved.
Step-by-Step Guide:
-
Automate Image Optimization and Preloading: The most effective solution is to proactively optimize and preload images before they appear in the slider. This prevents the inconsistent loading times that trigger the flickering. Use an image optimization workflow that:
- Resizes images: Ensure all images used in the slider are resized to consistent dimensions with the correct aspect ratio. This eliminates the height fluctuations.
- Compresses images: Optimize images for web performance to reduce load times.
- Preloads images: Preload the next 2-3 images in the slider sequence while the current image is displayed. This ensures that images are ready before the transition begins.
-
(Optional) Check and Adjust bxslider Settings: If you choose not to use automated image optimization, fine-tune the bxslider configuration directly. Examine your existing bxslider settings and consider adjusting these parameters:
pause duration: Increase the pause duration between slides to give images more time to load.preloadImages: Set preloadImages: 'all' to force bxslider to load all images before starting the slideshow.
-
(Optional) Investigate CSS Conflicts: Examine your CSS for any conflicts that might be causing flickering. Pay particular attention to:
z-index values: Ensure there are no overlapping elements with conflicting z-index values that might be obscuring or interfering with the slider’s visual elements.- CSS transitions: Check the CSS transitions applied to the slider images or the slider container; the transitions might be conflicting with the slider animation itself. Adding
transition: none !important; to the slider images might resolve this issue.
- Container dimensions: Ensure that the
.bx-wrapper class has a fixed height or min-height value that matches the dimensions of your largest slider image to prevent the container from collapsing during transitions.
Common Pitfalls & What to Check Next:
- Image Sizes: Inconsistent image dimensions are the main culprits. Even with preloading, images with different aspect ratios will cause the slider height to change during transitions, creating flickering.
- Cache Issues: Browser caching can sometimes create issues. Try clearing your browser cache or using a different browser to rule out caching problems.
- Theme Conflicts: If you recently updated your Luna theme, the new version might have introduced unexpected CSS changes conflicting with bxslider. Try reverting to an older version of the theme if possible to isolate the problem.
Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!
Had the same flickering issue with bxslider a couple years back on a different theme. CSS transitions were fighting with the slider’s animation. Add transition: none !important; to your slider images - fixed my flickering completely. I’d stick with bxslider if everything else works. Switching to flexslider can create new headaches, and it’s got its own weird quirks. If you do switch, backup everything first since the implementation’s totally different. Also check for custom CSS messing with your slider container’s height or width during transitions. That’s usually what causes the flicker.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.