fullpage.js - 如何设置 2 组不同的幻灯片 - 一组移动，另一组不移动答案

【问题标题】：fullpage.js - how to set up 2 different sets of slide - one that moves and one that does notfullpage.js - 如何设置 2 组不同的幻灯片 - 一组移动，另一组不移动
【发布时间】：2024-01-02 05:04:01
【问题描述】：

我正在使用https://github.com/alvarotrigo/fullPage.js 进行整页滚动，想知道是否有人可以帮助我...

有一个自动播放幻灯片（左右）的功能，但我不够精明，无法理解如何在一个部分而不是第二个部分实现这一点。

在下面的示例中：http://jsfiddle.net/2dhkR/106/ 我想要第 2 部分 - 能够进行自动幻灯片模式，而第 3 部分没有自动幻灯片模式。

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2
        <div class="slide">Slide 2.1 - should autoslide</div>
        <div class="slide">Slide 2.2 - should autoslide</div>
    </div>
    <div class="section">Section 3
        <div class="slide">Slide 3.1 - should not autoslide</div>
        <div class="slide">Slide 3.2 - should not autoslide</div>
    </div>
</div>


$(document).ready(function () {
    $('#fullpage').fullpage({
        'slidesColor': ['#AAA', '#FFB', '#0BD'],
        'scrollingSpeed': 700,
        'anchors': ['first', 'second', 'third', 'forth'],
        'controlArrowColor': '#000',
            'navigation': true,
            'navigationPosition': 'right',
            'navigationColor': '#000',
            'navigationTooltips': [],
            'slidesNavigation': true,
            'slidesNavPosition': 'bottom',
            'controlArrowColor': '#000',
            'loopBottom': true,
            'loopTop': false,
            'loopHorizontal': true,
            'autoScrolling': true,
            'scrollOverflow': true,

        afterRender: function () {
            setInterval(function () {
                $.fn.fullpage.moveSlideRight();
            }, 2000);
        }
    });
});

谢谢

【问题讨论】：

标签： jquery responsive-design slider fullpage.js

【解决方案1】：

您可以在您发布相同问题的 fullpage.js 论坛中找到答案： https://github.com/alvarotrigo/fullPage.js/issues/431#issuecomment-42404270

$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        loopBottom: true,
        afterRender: function(){
            idInterval = setInterval(function(){
                    $.fn.fullpage.moveSlideRight();
            }, 2500);
        },
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
            if(index == 1 && slideIndex == 1){
                clearInterval(idInterval);
            }
        }
    });
});

Live example

【讨论】：

可能是我的英语不好-我的问题没有意义。你链接完全删除第 3 节。我希望第 2 节有自动滑动移动动作 - 但不是第 3 节。
这只是一个如何使用函数clearInterval 和setInterval 以及插件提供的回调的示例。请尝试了解它的工作原理并将其应用于您的代码...
回答五月天。正如 Alvaro 所说的检查文档（将 afterSlideLoad 更改为 `afterLoad: function(anchorLink, index){ if(index == 2){ //when get to section 2 do ths idInterval = setInterval(function(){ $.fn.fullpage .moveSlideRight(); }, 2500); } if(index == 3){ //当到达第 3 部分时执行此操作 clearInterval(idInterval); }