I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended but the page jumps to the top. I understand that this problem is due to my use of an ID, but I am unsure about how to prevent my page from jumping. I attempted to resolve this by adding the following script:
$('a.someclass').click(function(e) {
e.preventDefault();
});
Here is the HTML code:
<div class="slider">
<div class="slides">
<div id="slide-1"></div>
<div id="slide-2"></div>
<div id="slide-3"></div>
<div id="slide-4"></div>
</div>
<a href="#slide-1" class="slide-button">Slide 1</a>
<a href="#slide-2" class="slide-button">Slide 2</a>
<a href="#slide-3" class="slide-button">Slide 3</a>
<a href="#slide-4" class="slide-button">Slide 4</a>
</div>
Unfortunately, this solution did not work. Can anyone help me with resolving this issue? Thank you!