- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I found a cool CSS image slider I wanted to recreate for my page here:
http://benschwarz.github.io/gallery-css/
I got it working great and it functions as a slider just fine. Problem is when I go to click one of the arrows to advance the slide the page jumps downward or upward to the slider element. I’m thinking it’s because the arrow image is within an anchor tag with the “href” set to a “#” type link. An example of the arrow link:
<|a href=”#item-3″><|img src=”assets/images/arrow-left.png” alt=”Left pointing arrow” /|><|/a|> (ignore the separating lines)
If anyone has any advice on how best to remedy this I’d greatly appreciate it. Thanks!
I think we’d need a link to your live example…
Alright, here’s a crappy little page I set up:
cssimageslider.comxa.com/
For some reason it won’t load images but the buttons displayed inside of the sliders have the same problem. If you are at the top of the page and click a button in the slider second down it will jump the whole page downward. I get the feeling it’s because the “href” of the anchor tag starts with a #, but I don’t understand how to turn that page jumping thing off.
I usually don’t recommend inline JavaScript but in this case it might be easiest :
<a onclick="event.preventDefault();" href= ...
Tried that method but it just seems to render everything useless. When you click the controls they then do nothing.
Here’s something to work with for other readers :
To me a pure CSS slider isn’t really worth it though, although I may have another look out of general curiosity. It’s overcomplicated yet limited to approach this without any JS. Even the author himself uses a whole bunch of jQuery on that page, making the point of avoiding it on the slider rather superfluous.