Help with linking images in CSS3 slider

[jenbi]

Hi

I am working on an imageslider for our new librarywebpage. I am not familiar with javascript and a newbie on CSS.

I would like the images in this slider http://codepen.io/jenbi/pen/vwshC to be linked to webpages on our site. I would be more than thankful if someone could look into it and hopefully give me a solution.

/Swedish Librarian

[Paulie_D]

The HTML is invalid unfortunately as you cannot have any elements other than li as direct children of aul.

That’s the first issue you should address but there are many other HTML structural errors too.

[jenbi]

Well, as I said I am a total newbie to all coding. What do you suggest?

[Paulie_D]

I appreciate that we all have to start somewhere but if this is for time-sensitive project then you really have a couple of options.

Get a professional to do it for you, or…

Find a pre-built slider with the functionality you need and just ‘plug it in’ based on the instruction documents….there are hundreds (if not thousands) of them out there.

Try googling Jquery Slider and you’ll see.

If it’s less time critical them you could google for slider tutorials (unfortunately, we’re not that kind of site).

Another option is to take one of those pre-built slider ‘plug-ins’ and work your way through the code to understand how these are built and what customisation you can do on your own.

Validate your HTML whenever possible.

BTW…

I noticed some ‘unusual’ elements in your Codepen h7 h10….I suppose these might actually exist but I’ve never seen h tags with a number higher than 6 and I’ve rarely seen anything higher than 4 used on a live site.

That’s not to say that you can’t create your own ‘custom’ elements, it’s just that you run the risk of browsers not understanding them and failing to render them properly. It’s not recommended that custom elements be used (there are more than enough validated elements to use already) but, as I said, you can…but I wouldn’t.

[jenbi]

Well thank you.

The googleing is just what I have done….done again…. and done again ( for several hours)…. and actually (belive it or not) the slider I have used is a pre-built + some overlay code from one of the turtorials on this site.

But thanks for your advice to get a professional help and for the advice to not use custom elements that correlate with actual tags.

[Paulie_D]

the slider I have used is a pre-built + some overlay code from one of the turtorials on this site.

Which pre-built slider? Can you provide a link to the original demo?

My advice, if you still want it and you wish to proceed,it to start with a slider that works without the extra functionality you want and use that as a base.

Then we can look at the base and see what we can add, progressively, to make sure it stays functional.

[jenbi]

Here: http://codepen.io/AMKohn/pen/EKJHf

[Paulie_D]

Oh…dear…As I said…it’s invalid HTML.

..but if that’s not a problem for you?

[jenbi]

No, of course I would like a correct HTML, but as my knowledge in coding is way to insufficient to be able to determine what is correct or not, how can I detect which slider is invalid or not to start with?

Then, so what solution = get professional help….;)

[Senff]

@Paulie_D The original pen is not done by the OP but he’s using that as a reference. I believe the invalid HTML is fine, the inputs do serve a purpose (as listeners/internal indicators to see which slide should be “active” as well )…I wouldn’t call it an “oh dear” situation, but I agree it feels a little dirty.

Now the original issue….

I would like the images in this slider http://codepen.io/jenbi/pen/vwshC to be linked to webpages on our site.

It makes sense that nothing happens when you click on any image, because there are images on top of them — which you don’t see.

(This is the way the slider works; all slides are stacked on top of eachother, all of them are transparent, except one. So basically, you’re always clicking on the last slide, which is on top of everything else.)

It’ll be kind of difficult to make each individual slide clickable with this slider, and you may want to look into another one that does have that functionality.

[Paulie_D]

The original pen is not done by the OP but he’s using that as a reference.

Yes, I was aware of that but i had assumed that the ‘pre-built’ slider would be more…”professional” (for wont of a better word).

I believe the invalid HTML is fine

It works….true enough, but it’s still invalid (as in it won’t pass the usual validation tests) …and, as you say, dirty.

It’ll be kind of difficult to make each individual slide clickable with this slider, and you may want to look into another one that does have that functionality.

Yes…indeed. This is one of the reasons I suggested a pre-built slider with the required functionality being an included option.

[jenbi]

Senff,

Thank you so much for your kind and informative answer. I am very thankful for your respond to my original question.

I have been looking around quite a bit to find a slider which supports linking images. Unfortunately I do not have axess to the original html page due to LMS licenses restrictions, which also makes it impossible for me to use a plugin slider.

If I am off on CSS I am totally lost in javascript. Though I believe if there is a slider with an inline javascript that makes linking possible I think I would be able to integrate it in our webpage.

Do you know of any slider that supports linking and works under these permissions?

[Senff]

A Google search for “CSS slider” gave me this one: http://cssdeck.com/labs/css3-image-slider

No Javascript required. I tested quickly and looks like you can easily make images linkable.

[jenbi]

Thank you so much! I will try that one.

[jenbi]

Unfortainly the forward arrows and buttons did not work when implementing code on webpage (without changeing anything). Back to ground zero….

[Author]

Posts