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