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

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

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

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