Streaming live at 10am (PST)

Full Page JS problems


#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

https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html

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)

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