Streaming live at 10am (PST)

Cms detail page vertical slider


#1

I it’s about a week that my brain crashes
Anyone can help me to found the simpler solution to made this project detail images navigation

Thx


#2

No one really? :pray::pray::pray::pray:
Please help me


#3

Hi @Folco_Nafta,
I believe it is possible and would also be possible using a CMS collection. I will do my best to make a demo for you soon. If anyone else would like to assist or create what Folco is looking for would be greatly appreciated.

Either way you will get what you are looking for soon Folco


#4

Saved myself sometime and did a forum search, you can find what you are wanting here
https://forum.webflow.com/t/fullpage-js-step-by-step-set-up/17251

A functioning example
https://alvarotrigo.com/fullPage/

Unfortunately there is no interaction that allows to scroll to a particular section.

Hope this helps,
Ben


#5

Hi everyone, after 2 week im at the same point.
this is my share link:
https://preview.webflow.com/preview/nafta-studio?preview=345cff7fdf41a133d66f4dbe6f165703
Every page are made using cms collection.
every page contain some fullscreen section made by collection list. One image - one text - another image etc the order is numeric field.
How can i link dynamically link one section item to next one and preview ? i can’t add a simple id to section because in Editor is not possible and interaction can link only ones a time.
The final effect is this: http:www.omse.co

Please help me, i try with custom vertical slider but is the same problem because i can’t add slide in dynamic correct?

thx


#6

please do not want to go back to wordpress for something so simple but that in webflow is impossible…


#7

Ok @Folco_Nafta

I have a working version here
You can view how I did it here

It is using the CMS for the images and it is also customizable allowing you to switch which slide goes where. You could even take it one step further and make it so it is filtered to a particular variable using a field and sort function.

If you would like help to implement it or are having troubles feel free to PM me and we can tee up a time where I can assist you one on one without delay.

No need to go to wordpress

Hope it helps,
Ben


#8

Hey @Folco_Nafta,

Here’s a very helpful tutorial by @PixelGeek https://youtu.be/w9TGl2Zgx58?t=3m15s

Best,
Naweed


#9

Ben, (on my knees) Do you wanna marry me ?
many thanks, sorry for my spaghetti english, i prefer to learn webflow.


#10

thx man, you are a forum angels like ben.


#11

Ben, super cooler iper mega thx.
But only a question, i try to make chaing with editor and the page doesn’t scroll.
this is a small problem because my client can duplicate collection items and change content
but live page review is a focus point to sell this platform,
any solutions?


#12

Hey @Folco_Nafta,
I’m glad I could help you. As for the page not scrolling in the editor that is because custom code and scripts only appear on the published site.

I wouldn’t call it so much a solution but you could check that their changes only publish to the webflow.io staging site then they can view it without affecting their current site. Once they are happy they contact you to which you switch to the custom domain and publish.

The downside to this though is that you still need to manually switch where it publishes as editors don’t have that ability yet.

It is however on the wishlist.
Site staging or selective editor publishing
Choose publish destination from editor
Allow collaborator to choose publish to live site or staging site

Hope this helps,
Ben


#13

Hi Ben.
the project is under development, everything works properly. only one thing is creating problems for me.

since the contents of my sections are displayed through a collection I can not animate the elements inside it and I can not add fixed elements.

do you know how I can do for example to give a fade in to the section-inner, so that only the text is animated and nn the whole slide?


#14

@Ben-Probity
Hi Ben, i’m very close to complete the project, your help was the clue.
Only last simple question, if i want to add some horizontal slide from the same collection of section with a switch …? and via code add …

https://preview.webflow.com/preview/bwbetween2?utm_source=bwbetween2&preview=e2d6a9523996be75832a7815245e4212


#15

Hey @Folco_Nafta,
I thought this would be possible by creating a CMS for horizontal slidersthat could be in each section and using multi reference and a switch to determine if the section should show the referenced slides. Unfortunately at this point in time you aren’t able to place a Collection List into another Collection List. Another method I thought of is to add the individual slides to each vertical section. The problem with that is that you are unable to add different slide numbers to the each of the slides. thus stuffing up the entire vertical slide.

I apologise as I am unable to help with this at the moment. Unless someone smarter than me (isn’t hard) is able to chime in with an alternative I believe what you require is currently unattainable.

Sorry again


#16

Hi Ben one possible solution is:
I try this solution.
1 collection called Project with only name and description plus a reference to another collection called PROJECT SLIDER ( this collection contains only a reference to relative project) than another collection IMAGES with one image and the reference to relative project and a switch if the image is part of a slider.
Than in project template page using your structure and collection list IMAGE in collection wrapper I have insert a div with cycle2 dynamic slider how catch the image from the same collection. The results is your structure but I can add infinite images to project gallery and slide and show it using conditional visibility and different div. perhaps the order is defined by the div inside collection wrapper and the images are filtered by switch ore other filters.

http://bwbetween.webflow.io/project/possimus-nostrum-voluptas#

Thank you and thanks to the guys how share cycle2 dynamic slider.


#17

Hey @Folco_Nafta , Im not entirely sure what you mean but I wouldn’t be installing another dynamic slider considering you already have one within the FullPage.js that you have installed already. The structure in which your sections are at the moment is.

< div class="fullpage">
  < div class="section">Section 1< /div>
  < div class="section">Section 2< /div>
  < div class="section">Section 3< /div>
< /div>

With the slider component all you need to do is add slide like so.

< div class="fullpage">
  < div class="section">Section 1< /div>
  < div class="section">Section 2< /div>
    < div class="slide">Slide 2.1< /div>
    < div class="slide">Slide 2.2< /div>
    < div class="slide">Slide 2.3< /div>
  < div class="section">Section 3< /div>
< /div>

If you can get one collection within another this will work perfectly with clean coding.
Hope that makes sense.