A client of mine is wanting to create an image gallery similar to this links: http://www.tn3gallery.com/
I know I can also insert the code, however I would love to be able to do this directly in Webflow if possible.
Needs:
Thumbnails at the bottom that slide to the next and displays the thumbnail in a larger view port. This viewport then sits on top of the smaller thumbnails.
It can be simple transitions - doesn’t have to be complex.
Any idea’s, hints, tips, video tutorials, or comments is very very welcome!
Can you please give me a little more detail on how you created this. I am looking at the preview and I am slowly getting it, but if you could please provide a small step by step I would greatly appreciate it.
create slider and give classes to all elements (so you could manipulate them)
make slider height bigger that slider mask height
inside the slider, between mask and navigation, add div (div-thumbs), give it position: relative and overflow: hidden.
inside div-thumbs add 2 divs with position: absolute, one - overlay (div-overlay) , another one - container for tumbnails (div-thumbs-wrap)
div-thumb-wrap will contain thumbnails, since there is 10 pics, I gave thumb width 10%
div-overlay styled with semi-transparent borders, you will have to count it depends on thumb size. Leave enough space for only one thumbnail fully visible.
nexst step - create interaction on every slide:
trigger - slide,
affect different element - div-thumb-wrap
for every different slide inside the interaction move div-thumb-wrap to position when right thumbnail will be fully visible
there is issues with size in %