how to stop scroll to specific Div but allow image to slide

user_15792053 0
Viewed 38

i am using #id on 3 buttons to change image on Slides , but i dont want to scroll to images slide section when i click on button just want to slide image to next without scrolling to image section here is drive video link to show how my web is looking right now https://drive.google.com/file/d/1dXMCeBNzkn2c5ChNQfOAVthNBHHsePSp/view?usp=drivesdk

    <div className="carousel carousel-center max-w-md   md:max-w-screen-2xl mx-auto  space-x-24 ">
        <div id="item1" className="carousel-item">
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
        </div> 
        <div id="item2"  className="carousel-item " >
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box"  alt="image2" />
        </div> 
        <div id="item3"  className="carousel-item">
          <img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
        </div> 
      </div>

css html javascript
1 Answers

Just add an event listener to your buttons and prevent the default behaviour. Add an id of "link" to the button and then add an event listener like below. If your button element contains an anchor tag, add the "link" id to anchor tag instead of button.

document.getElementById("link").addEventListener("click", (e) => {
  e.preventDefault();
});
user_111604460
Related