Streaming live at 10am (PST)

Horizontal Slider or Tabs Menu


#1

Hi, I am a absolute beginner with webflow. I created my website, but I would like to add a width slider. Could someone please show me how to add a width slider to webflow.

My site so far:

timdri1


#2

Hey @timdri1 what do you mean by a width slider?


#3

I want to let it slide like this: http://dimsemenov.com/plugins/royal-slider/full-width/
but instead of the pictures in the link, I want to use text blocks ("About us" in the picture)
My slider doesn't have to be that good, I just would like to use a simple slider


#4

This is not yet possible in webflow without custom scripting. We do have plans to add these types of interactions – so please keep an eye out for future releases!


#5

I knew it wasn't possible without custom scripting.
For my school project I have to use a width slider. The only problem is I don't know where to find a script and how to add it to my site.
I found a better example: http://marktyrrell.com/labs/blueberry/
I want to add some sort of navigation slider like in the example (not the images).


#6

Hi @timdri1, I put together a basic tabs demo for you which should accomplish what you are trying to do. Here is the live demo: http://tabs-demo.webflow.com/

And here is the read-only link to the Webflow designer:
https://webflow.com/design/tabs-demo?preview=034fae1e6dd99e6f8fe87f83c2d5d360

Hope that helps!


#7

Thank you for your reaction!
That's exactly what I want to add to my site.
At the moment I have 1 problem. I know how to export the code, by downloading it as a zip file.
But how do I import that zip file into my site?


#8

Currently, there is no way to import a site into webflow. You should however, be able to recreate the demo by following the same naming conventions.


#9

first time posting...

I'm also keen to add a pseudo-slider to my site. I had a look at the tabs-demo but couldn't decipher how it was put together. Any chance this will make it as a video in the Webflow University?


#10

Danro, but I have this code here from your example:

I know I can export it as a zip file, but how do I import that zip file (the exported code) into my site.


#11

@timdri1 You cannot import the example into your site.

Best you can do is to go through the example and observe the structure, and how each class is named. The Navigator panel works well for this:

Each tab should have the "tab" class, and the selected tab should have "tab selected" like so:

Each content block should have the "tabsection" class, with the active tab adding "active":

The tabsection class and the active class are what controls the opacity fade. Each "tabsection" sets opacity to zero and the "active" class overrides the opacity to 100.

The JS that powers all of the above is pretty basic jQuery, and you can see how the classnames above are being used in the script: http://dev.danro.net/tabs-demo.js


#12

Thanks for the help all!
It works now


#13

Open up the preview mode again in the editor, then click on the "Navigator" tab. You'll then see how each element is laid out.


#14