Ecommerce Shopify WordPress Discussion

Scroll Snap with Underscoretw_ not working

I'm currently using the "_underscoretw" theme for a Wordpress/Woocommerce website hosted in local with "Local". I have a slider with two buttons, coded by myself using scroll snap css feature, that is acting weird depending of the browser I'm using. Brave: Buttons works but the slider is not moving at all until the size of the window change (by resizing the browser or just by displaying the dev tools (F12) and move it by at least 1px) or if the slider takes all the frame of the browser. Chrome, Opera: Same as Brave but no smooth animation Firefox: Works perfectly, no problem at all. I'm actually really confused of what is causing this and I can't find a fix so here's my code, if you have any idea, i'll take it... HTML front-page.php <section class="bg-gradient-to-b from-wg-primary to-wg-secondary"> <div class="py-52 w-4/5 mx-auto md:bg-[url(link)] bg-no-repeat bg-top md:bg-contain lg:bg-auto"> <!-- TITLE + LINK --> <div class="flex justify-between items-end mb-5"> <h2 class="text-white font-vibes text-center text-6xl">Boutique</h2> <a href="link" class="text-white font-raleway font-bold relative text-md w-fit block after:block after:content-[''] after:absolute after:h-[1px] after:bg-white after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center">Tout voir</a> </div> <!-- CAROUSEL CONTAINER --> <div class="relative w-full overflow-hidden"> <!-- BUTTONS --> <button id="arrow-left" class="bg-white/50 rounded-md py-[.5rem] px-[.8rem] hover:shadow-md absolute z-50 top-1/2 -translate-y-1/2 left-10 hidden md:block transition-all duration-300 hover:scale-110 hover:md:shadow-md hover:md:bg-white"> <i class="fa-solid fa-chevron-left"></i> </button> <button id="arrow-right" class="bg-white/50 rounded-md py-[.5rem] px-[.8rem] hover:shadow-md absolute z-50 top-1/2 -translate-y-1/2 right-10 hidden md:block transition-all duration-300 hover:scale-110 hover:md:shadow-md hover:md:bg-white"> <i class="fa-solid fa-chevron-right"></i> </button> <!-- CAROUSEL --> <div id="carousel" class="flex justify-start gap-5 overflow-x-scroll snap-x snap-mandatory snap-always"> <?php if(have_rows('category_name')): while(have_rows('category_name')): the_row(); ?> <article class="item rounded-md snap-start w-64 h-96 relative overflow-hidden group flex-shrink-0 md:w-80 lg:w-[500px] lg:h-[600px]"> <a href="<?php the_sub_field('cat_link') ?>"> <h2 class="text-white font-vibes text-5xl lg:text-6xl absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40 after:w-full after:h-full after:bg-black after:z-30"> <?php the_sub_field('cat_name'); ?> </h2> <!-- OVERLAY --> <div class="absolute z-10 top-0 left-0 bg-black/50 w-full h-full transition-opacity duration-300 lg:opacity-0 lg:group-hover:opacity-90"></div> <!-- FIN OVERLAY --> <img src="<?php the_sub_field('cat_img'); ?>" alt="" class="w-full h-full object-cover align-top transition-transform duration-300 group-hover:scale-110" /> </a> </article> <?php endwhile; endif; ?> </div> </div> </div> </section> Javascript const leftArrow = document.querySelector('#arrow-left'); const rightArrow = document.querySelector('#arrow-right'); let count = 0; function scrollCarousel(direction) { const carouselItems = document.querySelectorAll('.item'); if (direction === 'left' && count > 0) { count--; } else if (direction === 'right' && count < carouselItems.length - 1) { count++; } carouselItems[count].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start', }); } leftArrow.addEventListener('click', () => { scrollCarousel('left'); }); rightArrow.addEventListener('click', () => { scrollCarousel('right'); }); Thanks in advance for the time spent on my problem and sorry for the poor presentation of my code. I'll make things clearer with your advice if need be. This is what I have already tried to solve this problem: I checked all my files Removed classes and code from the page to check conflict Made it on Codepen and it worked (with and without Tailwind) Tried a new project with a simple slider and it worked UNTIL I add the one that's not working and then both of them are not working anymore Tested on private navigation to see if there's a conflit with a browser extension, worked and then... didn't worked anymore. Check PHP and ACF Plugin Checked my package.json but there's nothing there except "Motion Dev"
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.