Streaming live at 10am (PST)

Fullpage.js interacting Webflow slider additional slides and blocking additional slide images


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 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:

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: Webflow - Trip Now

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! :eyes:

I am so glad this helped you though, you can accept my reply as a solution and close the topic! Happy designing! :grin::+1:

1 Like