Pachira 6.2.18 Stable

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>
<ul class="progress-tracker" style="display:none;">
    <li class="marker" id="marker-1"></li>
    <li class="marker" id="marker-2"></li>
    <li class="marker" id="marker-3"></li>
    <li class="marker" id="marker-4"></li>
</ul>
<div class="wrapper">
    <div class="slide" id="slide-home">
        <h1>Home</h1>
        <div class="next next-home" data-target="#marker-1"></div>
    </div>
    <div class="slide" id="slide-1">
        <h1 class="elmt">Slide 1</h1>
        <button class="elmt button back back-1" data-target="#marker-1">Back</button>
        <div class="next next-to-multi" data-target="#marker-2"></div>
    </div>
    <div class="slide" id="slide-2" style="display:none;">
        <div class="elmt multi">
            <h1 class="text1">Slide 2</h1>
            <h1 class="text2" style="display:none;">Slide 2.1</h1>
            <h1 class="text3 last-in-multi" style="display:none;">Slide 2.2</h1>
            <div class="next-multi"></div>
        </div>
        <button class="elmt button back back-multi" data-target="#marker-2">Back</button>
        <div class="next next-post-multi" data-target="#marker-3"></div>
    </div>
    <div class="slide" id="slide-3" style="display:none;">
        <h1 class="elmt">Slide 3</h1>
        <button class="elmt button back back-to-multi" data-target="#marker-3">Back</button>
        <div class="next" data-target="#marker-4"></div>
    </div>
    <div class="slide" id="slide-4" style="display:none;">
        <h1 class="elmt">Slide 4</h1>
        <button class="elmt button back" data-target="#marker-4">Back</button>
        <div class="next next-last-slide"></div>
    </div>
</div>

CSS

.progress-tracker {
    position: absolute;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    width: 200px;
    top: 0;
    padding: 6px 0;
    z-index: 8888;
}

.marker {
    width: 8px;
    height: 8px;
    background-color: #fff;
    opacity: .125;
    border-radius: 50%;
}

.wrapper {
    position: relative;
    width: 200px;
    height: 300px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 8px 0 0;
}

#slide-home {
    background-color: blue;
    z-index: 5;
}

#slide-1 {
    background-color: red;
    z-index: 4;
}

#slide-2 {
    background-color: yellow;
    z-index: 3;
}

#slide-3 {
    background-color: green;
    z-index: 2;
}

#slide-4 {
    background-color: magenta;
    z-index: 1;
}

.next {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2222;
}

.next-multi {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3333;
}

.next-last-slide {
    display: none !important;
}

.elmt {
    opacity: 0;
    z-index: 1111;
}

.text1 {
    opacity: 1;
}

.button {
    position: relative;
    z-index: 9999;
}

JavaScript

$(document).ready(function () {
    $('h1').fadeIn(1000);
});

$('.next').click(function() {

    $(this).parent().fadeOut(1000).nextAll().slice(0, 2).fadeIn(1000); // hide parent (slide) and show the next one
    $(this).prevAll().velocity('transition.slideDownOut', {
        stagger: 250
    }); // stagger transition out all of .next's previous siblings
    $(this).parent().next().children().velocity({
        delay: 750
    }).velocity('transition.slideDownIn', {
        stagger: 250
    }); // stagger transition in all of the next slide's children after a delay
    var $targetNext = $($(this).data('target'));
    $targetNext.fadeTo( 500, 0.5 ); // fade the next slide's progress marker to 33.3% opacity
    $('.flex').css("display", "flex");
   
});


$('.next-home').click(function() {
    $('.progress-tracker').fadeIn(1000); // fade in progress tracker when home's .next is clicked
    $('.flex').css("display", "flex");
});


$('.next-to-multi').click(function() {
    $('.next-post-multi').fadeOut(1);
    $('.next-multi').fadeIn(1);
    $('.flex').css("display", "flex");
});


$('.next-multi').click(function() {
    		$(this).siblings().not(":hidden").fadeOut(500).next().delay(500).fadeIn(500);
    if ($('.last-in-multi').is(":visible") == true) {$('.next-post-multi').fadeIn(1);}
    
    $('.flex').css("display", "flex");
});


$('.back-multi, .next-post-multi').click(function() {
	$('.multi').children().fadeOut(1000);
    $('.multi').children().slice( 0, 1 ).delay(1000).fadeIn(1000);
    $('.flex').css("display", "flex");
});


$('.back').click(function() {

    $(this).parent().fadeOut(500).prev().fadeIn(500); // hide parent (slide) and show the previous one
    $(this).parent().children().velocity('transition.slideUpOut', {
        stagger: 125
    });  // stagger transition out all of this slide's children
    $(this).parent().prev().children().velocity({
        delay: 375
    }).velocity('transition.slideUpIn', {
        stagger: 125
    }); // stagger...