Image slider help

[Thadley]

Hey!

Basically here is what I need to do:

1)have images that can be scrolled left and right
2)when it gets to the end, it disables the functionality of that direction button
3)when you click on the thumbnail, the bigger version gets displayed in a box above the thumbnails
4)learn how to make this

I’m not good at javascript and frankly it intimidates me because its confusing and hard to understand. I need to know how to create this and not grab a plugin.

Anybody willing to help with a break down and tips? :) would be greatly appreciated

[Thadley]

I’ve added the code below for what I have in the script at the moment.

There should be 3 sets of 3 images to scroll through but the left and right is only moving 1 set both ways. Why? I’m lost.

[Thadley]

I’m not against using a plugin, but i won’t learn javascript/jQuery if i don’t code stuff myself, you know what i mean?

Ill try that, but basically the left button shifts it back to the original position. ill post the html and css soon.

Ill get back to you soon.

[Thadley]

If i substract the -imgReelWidth, it scrolls but a lot. The images scroll till they disappear and the same for the left button.

hmm? and ideas?

This is my current styles:

This is my current HTML:

[Thadley]

Nice thanks for the demo!

The demo seems to be good although when I click on which ever number from the slider, it doesn’t show up?

[Thadley]

Thats fine :) I’ll give it a shot and if I have trouble i’ll let you know.

Btw a great resource for placeholder images is http://www.placekitten.com :P

Set the href to the site’s domain and change the numbers at the end to the size you want eh Voila! Just thought I’d share!

[Author]

Posts