Rebeca
Rebeca
PostsComments
KPCKevin Powell - Community
Created by Rebeca on 2/14/2025 in #front-end
Slider activation causing sudden vertical scroll
Thank you for the replies! I couldn't quite fix it using only CSS, so I added some JS and it worked. I figured that what was causing the problem was the .slider-nav links, because they were changing the url when I clicked to scroll the images, and it caused the sudden vertical scroll. So I added some JS to stop the url from changing. I don't know if there's some easier way to solve this, but it's working now! HTML and CSS remain the same, but here's the JS I added: 
document.addEventListener("DOMContentLoaded", function () {
    const slider = document.querySelector(".product-slider");
    const navLinks = document.querySelectorAll(".slider-nav a");

    navLinks.forEach((navLink, index) => {
        navLink.addEventListener("click", function (event) {
            event.preventDefault(); // blocks url changes
            slider.scrollTo({
                left: slider.clientWidth * index,
                behavior: "smooth"
            });
        });
    });
});
document.addEventListener("DOMContentLoaded", function () {
    const slider = document.querySelector(".product-slider");
    const navLinks = document.querySelectorAll(".slider-nav a");

    navLinks.forEach((navLink, index) => {
        navLink.addEventListener("click", function (event) {
            event.preventDefault(); // blocks url changes
            slider.scrollTo({
                left: slider.clientWidth * index,
                behavior: "smooth"
            });
        });
    });
});
10 replies