Hi everyone! I’m having trouble with an image slider on my client’s website. There’s this weird flickering effect that happens when the images change from one to another.
I’m using a customized version of the Luna theme with bxslider. I noticed that newer versions of this theme come with flexslider instead. Should I consider switching to flexslider to solve this problem?
Has anyone experienced similar flickering issues with bxslider? What would be the best approach to fix this - tweaking the current bxslider settings or migrating to a different slider solution?
Any suggestions or advice would be really helpful. Thanks!
The flickering happens when CSS transitions clash with bxslider’s timing. I’ve hit this same problem when themes mess up the slider setup.
Skip debugging bxslider or switching to flexslider - just automate the whole image carousel instead. Flickering usually means the slider’s loading images before they’re ready or CSS timing is off.
I automate everything: optimize images, preload them right, and sync the carousel timing. No more flickering since everything runs in sequence.
Bonus: you can auto-update when adding new images, handle different screen sizes, and A/B test carousel settings to see what your client likes best.
Beats manually fixing slider issues every time. Automation handles the tech stuff so your carousel just works.
Hit this exact flickering issue six months back on a client’s Bigcartel store. Turned out to be image preloading, not CSS conflicts. Fixed it by adding a simple preloader function - loads all carousel images before bxslider kicks in. Try setting preloadImages: 'all' in your bxslider settings and bump the speed to 800-1000ms. Gives the browser enough time for smooth transitions. Check if your images are optimized too - big files cause that stuttering during transitions. Before jumping to flexslider, test different easing options like ‘swing’ instead of ‘linear’. Sometimes you just need the right timing combo for your theme.
Had this exact flickering issue on a Luna store last year. The problem was z-index stacking mixed with opacity transitions. Before jumping to flexslider, try this: add z-index: 1 to your current slide and z-index: 2 to the incoming slide in CSS. Luna’s got messy layer management that makes transitions stutter. Also check for custom CSS on .bx-wrapper - temporarily remove any transform or filter properties to see if that’s the culprit. Luna’s default styling fights with bxslider’s animation engine. If this fixes the flickering, you can keep bxslider and skip the theme overhaul headache.
check your css transitions first - that’s usually the prob. had the same issue last month with keyframe animations clashin in my theme. try adding transition: none; to your slider imgs temporarly and see if the flicker stops. if it does, you’ve got a timing issue!