Hiya,
So I have created a fullpage slider with a number of images. Fullpage height for each slider, and right to left slide
works fine here https://trip-now-0f35e4.webflow.io/destinations-nofullpage
but when I add fullpage.js to the page, it seems to conflict with secondary slides in the slider, in that they don’t display at all. See here:
https://trip-now-0f35e4.webflow.io/destinations
I can’t see any errors in the console, and I’m wondering if anyone has had a similar problem and what they did to solve it, or if you have found a better replacement for fullpage.js that doesn’t have this conflict.
Here is my site Read-Only: https://preview.webflow.com/preview/trip-now-0f35e4?utm_medium=preview_link&utm_source=designer&utm_content=trip-now-0f35e4&preview=cd98eea022edc9002e09362c32b17943&pageId=607f384dc641970f8d2d870c&mode=preview
Hey @Willem_Reyners_Tay, I may have found a solution. Upon inspecting your page with fullPage.JS
, I notice that your sliders have incorporated a fullpage class only on the first image as seen here:
It however, does not get incorporated on the other slides and I am guessing this is because in your Webflow project, there are no classes associated with Slides 2, 3 and 4. I would recommend adding the class Slide
to them.
How it was setup before:
Class is set on Slide 1 only
No Classes set on other slides
After adding the class Slide
to all of them, your Mask wrapper
should look like this:
Give this method a try for one of your sections, publish your project and double-check if this works.
This is not a guaranteed solution, It is my observation and an attempt to solve it for you from what I have inspected.
Hope this helps!
@imtiazraqib you little ripper!! thank you so much that’s exactly what it is and it works great now!
I still don’t fully understand the conflict because its all nested under the #fulllpage div but thank you!!
1 Like
So you were right with how you structured everything.
I personally think this situation came up for you because fullPage.JS
also has a built in function that looks for slide
class to create horizontal sliders. It is one of it’s paid features. I guess just having the class Slide
probably triggered it to nest it into it’s own div
structure. So in your case, you had two fullPage.JS
functionality running in a way!
I am so glad this helped you though, you can accept my reply as a solution and close the topic! Happy designing!
1 Like