fullPage.js 滚动滑动到不同的方向

Question

我在我的网站上使用 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>

Answer 1

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

来自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>

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

fullPage.js 滚动滑动到不同的方向

fullPage.js scrolling slides to different direction

javascript

jquery

fullpage.js