fullPage.js滚动到不同的方向

时间:2015-06-09 11:47:17

标签: javascript jquery fullpage.js

我使用fullPage.js到我的网站,我想创建不同方向的滚动我的意思是,如果我有ex.4部分,每个部分都有幻灯片,我想第一部分有左箭头和滚动此幻灯片左边和第二部分只有箭头可以向左和向右滚动,依此类推,向左和向右滚动。有可能吗?

<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 个答案:

答案 0 :(得分:0)

论坛已经回答: https://github.com/alvarotrigo/fullPage.js/issues/1293

来自the docs

  

如果要定义不同的起点而不是第一部分或部分的第一张幻灯片,只需将活动类添加到要首先加载的部分和幻灯片中。

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

这是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
});