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

Home Forums CSS How do I stop linked image in slider from being displayed at top of screen?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #269967


    I am building an image slider with only CSS and HTML. The slider has 3 images. The forward and back arrows are anchor links to the next image. I am following and adapting the example in this pen.

    Here is a link to the pen with the relevant portion of my code.

    The slider works, but when I click on the next or previous link, the page jumps and shows the image at the very top of the screen. This behavior does not seem to happen in the codepen example.

    Is there a way to stop this from happening? Or is there a better way of achieving this?



    I found a way to do it. Not sure if this is the best way and I would be curious to hear of any other suggestions.

    What I did, was to apply the :target to another element, which is not displayed and use that to change the z-index of the slide I want to bring to the font. This prevents the targeted anchor from being displayed at the top of the screen.

    Here is a link to a pen with the code I used for the slider.

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