Sign in to follow this  
Followers 0
monkeyj

Image slideshow

4 posts in this topic

Hello, I'm hoping this is the right section to post. I would like to slightly advance the slideshow in the example at: w3schools.com/howto/howto_js_slideshow.asp

 

However having basic knowledge of CSS and 0 of JS I don't even know where to start. I'd like to add two things:

 

1) change bullets into small thumbnails of the respective images, with dim/highlight behaviour remaining intact (i.e. the inactive thumbnails being slightly whited-out, and active/hover ones bright)

 

2) make the strip of thumbnails rotatable automatically when reaching the last image on display, also by pressing small arrows at each end, when using mousewheel/touchpad scroll and drag, and touch on mobile devices

 

Many thanks for suggestions, hope I haven't asked too much! :)

Edited by monkeyj

Share this post


Link to post
Share on other sites

Ideally you would make separate thumbnail images instead of loading the larger image in a smaller size, but you can replace those dot span elements with img tags for the thumbnails and then use similar CSS to fade them in and out on hover. The transition effect might be different (maybe you change opacity instead of background), but it's the same idea to use CSS to handle the hover behavior.

 

It already goes back to the beginning when you're at the end though. If I click to the last slide and then click Next again it will go back to the first.

Share this post


Link to post
Share on other sites

Thank you for the suggestion. I successfully changed the bullets into thumbnails and used CSS opacity as you suggested, and it works perfect.

 

Regarding my second question, what I want to achieve is rotation of the thumbnails (previously dots/bullets) underneath the image when there is more thumbnails than can fit in one line (I guess ideally I'd want the rotation to be independent from the image, until one of the thumbnails is clicked) . Currently if I increase the number of thumbnails once they reach the end of the line they create a second line underneath.

 

I think I worded it incorrectly in my original post, it should read:

 

"2) make the strip of thumbnails rotatable automatically when reaching the last thumbnail on display, also by pressing small arrows at each end, when using mousewheel/touchpad scroll and drag, and touch/drag on mobile devices"

 

 

Thank you again for your help

Edited by monkeyj

Share this post


Link to post
Share on other sites

You'll need to make the thumbnail list into its own carousel, if you look up some carousel galleries you should get some ideas about how they handle various things.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0