Hello everyone,
Was wondering if anyone can figure out how to get the left / right slide on hover effect to be found at the following page: http://woodwork.nl
Thank you.
Here is my public share link: LINK
(how to access public share link)
Hi,
You’ll definitely need a bit of Javascript programming to achieve that. You can’t have an animation that stops and resume on hover with Webflow at the moment.
Thanks Vincent. Thought so.
As I don’t have any JS programming skills (not yet), I was wondering if anyone has ever stumbled upon a pre-made plugin which can be used to achieve a similar effect.
While we are on this, do you think it would be possible to achieve that other effect on the same page as in, when you click on a given slide to have those on the sides moving out to the right and to the left?
Bingo!
How about this one?
http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/
Can anyone please help me out with implementing this as custom code?
I’ve never done this before…
Maybe, but it seems to me that to center the opened div in the viewport, from wherever you clicked on it, it would be a lot of tweaking. So, again, that’s a perfect task for JS.
http://vincent.polenordstudio.fr/snap/mpbyu.jpg
You can ignore the first line, Webflow already calls jquery.
You need to paste the second line in the head section of the custom code panel and also download the js file, host it on a server or dropbox, and put the path in the line instead of /js/scrollingcarousel.2.0.min.js (full path starting with HTPP) because Webflow doesn’t host your files except images.
http://vincent.polenordstudio.fr/snap/w4r1w.jpg
That you have to reproduce with Webflow, in the designer. so make a div, give it the ID carousel-demo1 in the settings tab, the class “carousel-demo” in the style tab, then put a list with list items in it.
http://vincent.polenordstudio.fr/snap/ec8dg.jpg
replicate all the styling within the designer, there is nothing in this css code that you can’t do with the designer. Make it to your taste.
http://vincent.polenordstudio.fr/snap/hrutf.jpg
Paste this in the “before /body” box of custom code section, at page level or site level (dashboard)
…but now you’re going to make that behavior stop when you click on a panel, so more JS code.
Legend!
However, I might be doing something wrong…
https://preview.webflow.com/preview/sandbox-cc1ad9?preview=undefined
Thoughts?
the link doesn’t work for me.
sorry about that.
how about now?
https://preview.webflow.com/preview/sandbox-cc1ad9?preview=a8352aa5483bec7f84748a01084e5703
I guess that if you see all the items then there is nothing to scroll…
reduce the size of the carousel demo div and pass it overflow hidden
then give a fixed width to the list container for it to stay inline
Also it will work only once published
I’m feeling a bit dumb right now…
I know what you mean. However, I have been trying to fix that as you suggested but I keep getting “carousel-demo li” items #5 and #6 showing on a second row.
Hi Vincent, I’ve been trying to make this work but I just can’t do it. Have you tried this yourself? Perhaps there’s something wrong with the whole setup when implementing this into Webflow… Thoughts? Thanks a lot!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.