fullPage.js scrolling slides to different direction

1.1k views Asked by At

Im using fullPage.js to my website and i want to create scrolling in different direction I mean, if i have ex.4 section and every section have slides in it i want to first section have arrows to left and scrolling this slide to left and second section have only arrow to riht and scrolling thi slides to right, and so on, 3th to left and forth to right. is it possible?

<div id="fullpage">
    <div class="section" id="section1">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>         //scroll this section to left
    <div>
    <div class="section" id="section2">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>        // scroll this section to right
    <div>
    <div class="section" id="section3">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>       // scroll this section to left
    <div>
    <div class="section" id="section4">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>      // scroll this section to right
    <div>
</div>
1

There are 1 answers

0
Alvaro On BEST ANSWER

Already answered in the forum: https://github.com/alvarotrigo/fullPage.js/issues/1293

From the docs:

If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.

<div class="section active">Some section</div>

Here a demo online.

HTML:

<div id="fullpage">
    <div class="section">
        <div class="slide active">Two 1</div>
        <div class="slide">Two 2</div>
        <div class="slide">Three 3</div>
    </div>
    <div class="section">
        <div class="slide">Two 1</div>
        <div class="slide">Two 2</div>
        <div class="slide active">Three 3</div>
    </div>
    <div class="section">Three</div>
</div>

Javascript

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    loopHorizontal: false
});