Can I put an anchor tag in this slideshow?

Code Feedback
1

Hello all,

Here is a link to my codepen portfolio page https://codepen.io/kamilahd/pen/qBaBWNX?editors=1100.

I’m working on my personal portfolio and decided to try and use a slideshow instead to display my projects. However, I inserted a link in the slideshow (to the tribute page) and nothing is happening. The links all work in the projects section just above.

Also, how come the slideshow is the only element that goes over my navbar?

Please help!

2

I’m not seeing a link to the tribute page, I see a header that has the text ‘Tribute Page’, the same for the rest of your projects.

Did you give us the correct / current pen link?

On a side note, you should clean up your page;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • And </br> is not a valid HTML tag. (Neither is </img>)
3

Thanks. I just saved it so maybe now you’ll see it. The link element is in the slideshow div , right under the “Tribute Page” heading.

4

Let me start off by saying that carousels are not my forte so I probably won’t be any help.

I do see now that part of the slide is clickable and takes me to your tribute page. It’s the areas above and below the text “Tribute Page”. The padding around “Tribute Page” is not part of the link.

Someone better equipped to help can join in. (You’ve given me something I need to familiarize myself with.)

5

That’s a nice pure-HTML/CSS-slideshow, the only problem is your z-index of the #slides, you’ve given it a value of 1, while your controls have a value of 3, so this should work:

#slides {
  z-index:10;
}

Same with the navbar, it needs a z-index greater than 10 to be above the slideshow.

1 Like
7

Pure CSS stuff is cool and all but for the most, I would advise against it. Both the HTML and CSS will often get messy when doing anything even remotely complex. Debugging the CSS if you didn’t write it can also get hard (e.g. your back button doesn’t work as intended).

For practice, learning about using hidden elements for state and learning about sibling selectors isn’t a bad idea and you can always use the techniques for simple toggle states, but for something like a slideshow/carousel, I might consider other options.

Here is an example of CSS only carousel versions using links (jump links/anchor links) which I can see working fairly cleanly without all the hidden inputs, labels, and sibling selectors. It also links to a simple JS lib which is always an option as you do not have to reinvent the wheel every time.

9

It worked! Thank you :smiley:

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.