Full Page JS problems

Design help Custom code
1

Hello,
I was tryng to use fullpage JS to create a custom slider, but something is wrong, and I can’t figure out what’s wrong. Somebody can please help?
https://preview.webflow.com/preview/mcag-mediapack?preview=fb7b65986cdd05f17c850d02cf134794

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Use cdn from her (I don’t know from where you get the link you added :slight_smile: )

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js"></script>

And use this CSS (regular -or- min)
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.css

Basic example:

fullpage.js - Scroll Horizontally extension (23$)

fullpage.js extension providing horizontal scroll within sliders by using the mouse wheel

Fix this. Than add live url

3

Hi @Siton_Systems, and thank you for your reply. I changed the links (still not using the scroll horizzontally, actually I don’t need to scroll using the mouse wheel), but still does not work. What am I missing?
I was thinking about the overflow in the wrapper, but even changing it, no results :confused:

4

Add live URL - no way to test the code by the editor.

In general it’s not “safe” to change the .slide styles (Core styles) - without know what your doing. If i added your styles to fullpage.js codepen the layout broken:

so remove this (Dont add any layout styles for slides - fullpage.js do it for you)

.slide {
    display: flex;
    width: 95%;
    height: 85vh;
    min-width: 95%;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}
5

Hi @Siton_Systems, please find the live url here : http://mcag-mediapack.webflow.io/ (apologies ^^)
So it’s not showing because of the styling? If a put just text inside, it will show me at least the text (but it will not slide). What am I missing?

6

update I’ve made some test, and I can make it work. I need now to figure out how to fit this with my design (every slide contains the slide and a small portion of the other slide, like in this exampl that I did with just webflow http://mcag-digital-guidelines.webflow.io/aw18-trends/animation-test). Any Idea?

7

Good start :slight_smile:

The width of the slides calculate by JS (You could override this only with !important)

image
image762×58 10.3 KB

If you have 2 slides each slide is 50%…3 slides each slide is 33.333% and so on. If for 3 slides you add this custom code it should work (Not pefrect beacuse the last slide with extra right space).

.slide{
  width: 32.2%!important;
}

Add screenshot -or- more detials - its hard to 100% understand what you trying to get.

8

Hi @Siton_Systems and thanks for this.
this is what I am tryng to get : http://mcag-digital-guidelines.webflow.io/aw18-trends/animation-test
I have already this made in webflow, but I wanted to test with fullpage.js. Do you think is possible?

9

I think yes - but fullpage.js strong side is “fullpage” scrolling - so i dont know how much code and ideas you need to add - to get the idea like your refrecnce

Your example is more a “slider” - maybe try to use swiper/slick/owl/flickity and so on.

10

I was just thinking about other options. The ting is that in term of animation, the slider is a little limitative in my opinion (not a fan of the slide in trigger)
I will keep going with the WF slider anyway ^^

Thanks

11

In case it helps guys, if you are trying to create horizontal slides with fullpage.js and webflow here’s my project you can clone:

And the video tutorial here with the step by step guide: