Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issue with CSS image slider anchor tags

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #236223
    dalecooper666
    Participant

    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!

    #236224
    Shikkediel
    Participant

    I think we’d need a link to your live example…

    #236239
    dalecooper666
    Participant

    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.

    #236240
    Shikkediel
    Participant

    I usually don’t recommend inline JavaScript but in this case it might be easiest :

    <a onclick="event.preventDefault();" href= ...
    
    #236241
    dalecooper666
    Participant

    Tried that method but it just seems to render everything useless. When you click the controls they then do nothing.

    #236256
    Shikkediel
    Participant

    Here’s something to work with for other readers :

    Demo

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.