Vertical carousel scroll skip slides from the 4th slide

kidqn commented 3 years ago

Description

I tried to apply autoplay for Vertical slider. But it causes skipping slide when move from 4th slide.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Background images - fullPage.js</title>
    <meta name="author" content="Alvaro Trigo Lopez" />
    <meta name="description" content="fullPage full-screen backgrounds." />
    <meta name="keywords"  content="fullpage,jquery,demo,screen,fullscreen,backgrounds,full-screen" />
    <meta name="Resource-type" content="Document" />

    <link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
    <!-- <link rel="stylesheet" type="text/css" href="examples.css" /> -->
    <style>

    /* Style for our header texts
    * --------------------------------------- */
    h1{
        font-size: 5em;
        font-family: arial,helvetica;
        color: #fff;
        margin:0;
        padding:0;
    }

    /* Centered texts in each section
    * --------------------------------------- */
    .section{
        text-align:center;
    }

    /* Backgrounds will cover all the section
    * --------------------------------------- */
    .section{
        background-size: cover;
    }
    .slide{
        background-size: cover;
    }

    /* Defining each section background and styles
    * --------------------------------------- */
    #section0{
        background-image: url(imgs/bg1.jpg);
    }
    #section0 h1{
        top: 50%;
        transform: translateY(-50%);
        position: relative;
    }
    #section2, #section4, #section6{
        background-image: url(imgs/bg3.jpg);
        padding: 6% 0 0 0;
    }
    #section3, #section5{
        background-image: url(imgs/bg4.jpg);
        padding: 6% 0 0 0;
    }
    #section3 h1{
        color: #000;
    }

    /*Adding background for the slides
    * --------------------------------------- */
    #slide1{
        background-image: url(imgs/bg2.jpg);
        padding: 6% 0 0 0;
    }
    #slide2{
        background-image: url(imgs/bg5.jpg);
        padding: 6% 0 0 0;
    }

    /* Bottom menu
    * --------------------------------------- */
    #infoMenu li a {
        color: #fff;
    }
    </style>

    <!--[if IE]>
        <script type="text/javascript">
             var console = { log: function() {} };
        </script>
    <![endif]-->
</head>
<body>

<div id="fullpage">
    <div class="section " id="section0"><h1>fullPage.js</h1></div>
    <div class="section" id="section2"><h1>Lovely images <br />for a lovely page</h1></div>
    <div class="section" id="section3"><h1>One Image = One thousand words</h1></div>
    <div class="section" id="section4"><h1>One Image = One thousand words</h1></div>
    <div class="section" id="section5"><h1>One Image = One thousand words</h1></div>
    <div class="section" id="section6"><h1>One Image = One thousand words</h1></div>

</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../dist/fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#fullpage').fullpage({
            verticalCentered: false,
            afterLoad: function (origin, destination, direction) {
                let intervalAutoplay = setInterval(() => {
                    fullpage_api.moveSectionDown();
                }, 3000);
                // const allSectionsNumber = document.getElementById('fullpage').querySelectorAll(':scope > .section').length - 1;
                // function autoplay() {
                //  if (destination.index === allSectionsNumber) {
                //      clearInterval(intervalAutoplay);
                //  } else {
                //      fullpage_api.moveSectionDown();
                //  }
                // }
            }
        });
    });
</script>
</body>
</html>

kidqn commented 3 years ago

Fixed. Change afterLoad to afterRender.

alvarotrigo commented 3 years ago

Check out this tutorial here regarding how to create an automatic vertical slider on fulllPage.js

alvarotrigo / fullPage.js

Vertical carousel scroll skip slides from the 4th slide #4200

Description