Streaming live at 10am (PST)

Howto: Preview Thumbnails when hovering over Slider-Arrows


#1

Hi there,

I m just wondering:
Would it be possible to create such a preview effect when you hover over a slider-navigation arrow like this in webflow:
http://themes.themepunch.com/?theme=revolution_wp

Screenshot:

From the fly I cant image how to trigger different previews since there are only global and unique slider arrows and the hover would be always the same.

Regards and thanks for your thoughts,
Daniel


#2

Hmm yes it's tricky, because hover can't register on two elements at once. It's one ot the other. And you HAVE to hover the arrow in order to click it.

We could trick it if we had the possibility to link to slides (which is a very awaited feature), so we could ditch the arrows entirely and recreate a slider navigation manually, per slide, with local previews.

There must be a way, there is always a way (: If you don't have that much slides, you could ditch the Slider widget entirely and try to recreate yours manually from scratch. This way it would be easy, and you could even reuse all interaction by naming elements the same way, per slide, and use limit to siblings and parents features.

Let's ask @sabanna, she's in a crazy creative workaround spree these days wink


#3

Hi vincent,

yeah I think there is maybe only the way to rebuild the slider widget completely in order to gain that much control over the slider arrows and the necessary interactions.

We ll see :). Until there is no better solution for this I have to do it that way.

Thanks!!!!!!

Daniel


#4

I mean, you can still go and licence the JS slider you were linking to begin with, and use it along Webflow wink


#5

smile Thanks again, Vincent.

Interesting idea, I would try ))))))))

Since we are making color changing effect on hover, why would not make pop-up image effect on hover?
Here is the structure of the generic Webflow slide, and I see it is possible to add image inside the arrow-links, because it is like link-block,where you can add anything.

What if add there few images (how many slides) and make them display:none - display:block on slide trigger. Then make picture pop-up on hover. Only difference: there will be no sliding effect on this small thumbnails.

Or even more crazy idea: add slider instead img smiley but don't know yet how to make it pretty, lol


#6

Hi thanks for your first thoughts.
I will not need to have a slide effect on the thumbnails.

Only thing necessary would be to have different preview-thumbnails for each slide on the left / right side next to the arrow.

Thats all.


#7

Well, then try it blush
1. Add thumbnails-imgs to the links area
2. Give them different classes so you can control them with slide interaction, but create one more class for all of them. So every thumbnail will have 2 classes on it.
3. Give them same fixed positions where you want them to appear (for each side their own position)
4. Give them all opacity 0%
5. Apply interaction to the Arrow-links with hover trigger: thumbnail - opacity=100%
6. Apply interaction to the thumbnails with slide trigger: all thumbnails - display=none, needed thumbnail - display=block

I am sorry, I have no time to play with that in webflow now. Try to follow this steps, if you will stuck somewhere, let me know, will figure it out.

Good luck blush


#8

Thank you so much,

but since I m completely lost with that topic, I can't get it to work that way.

  1. Is there any documentation about the "slider interaction"?

  2. Since all Images are not within a "slide" how should the interaction trigger anything, since we do not know when which slide is displayed?

Maybe I try this:

Create a two divs and place the two specific images in each div (right & left). Put this div into each corresponding slide.
Create a Hover -> Show Interaction on that div. Put a delay when hiding the elements again, because there is only the interaction on that specific div and when a user hovers over the arrow element of the slider, it would trigger a "display:none". With that delay it kind of fades slowly away.
Thats a workaround because the hover is not triggered by the arrow element itself, but hey...

  1. Maybe I just got your explanation totally misunderstood and I m noob stuck_out_tongue_winking_eye.

Cheers,
Daniel


#9

Hmm how do you solve the fact the arrows are not per slide but always the same? So how do you know when you're on a certain slide, to call the thumbnail of the next slide?


#10

ok guys smile lets fantasy a little bit crazy smiley

http://sapdesign-sandbox.webflow.io/crazy-slider

I did it super simple, page: crazy-slider >>>

https://preview.webflow.com/preview/sapdesign-sandbox?preview=b0d5cab04f2e2a1ab8604c632888a8bb


#11

Absolutely fantastic,

thank you so much @sabanna!!!!!!!!!!

All the best
Daniel


#12

Good luck )))))))) It was fun wink
I just was wrong about 2 classes on same thumbnail, 1 class is enough


#13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.