fullpage (swiper.js)

by this_mong

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<header>
    <div class="container">
        <a href="#" class="logo_menu">
            <div class="logo logo_header">logo</div>
        </a>
        <nav>
            <ul class="menu">
                <li class=""><a href="#">menu0</a></li>
                <li class=""><a href="#">menu1</a></li>
                <li class=""><a href="#">menu2</a></li>
           </ul>
        </nav>
    </div>
</header>
<div class="swiper mySwiper swiper-container">
    <div class="swiper-wrapper bg">
        <section class="mainfullbox0 swiper-slide"></section>
        <section class="mainfullbox1 swiper-slide mainbotBk"></section>
        <section class="mainfullbox_Last swiper-slide"></section>
    </div>
    <div class="swiper-pagination mainfull_navi"></div>
</div>
<footer class="foot">
    <div class="footer_main_area">
        <div class="container">
            <ul class="logoArea">
                <li>
                    <div class="logo">footer</div>
                </li>
            </ul>
        </div>
    </div>
</footer>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
body {
  padding-bottom: 200px;
  background-color: #000;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera*/
}
head {
  display: block;
}
header {
  border-bottom: 1px solid #fff;
  background-color: #773aff;
  width: 100%;
}
header.head {
  position: fixed;
  background-color: transparent;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 9999999;
}
header > .container {
  width: 1380px;
  margin: 0px auto;
  padding: 30px 0px;
  justify-content: space-between;
  background-color: #773aff;
}
header.head > .container {
  background-color: transparent;
}
header .menu {
  clear: none;
  max-height: none;
  font-family: "SBAggro", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.container {
  width: 1380px;
  margin: 0 auto;
}
.foot {
  background-color: #fff;
  color: #535353;
  font-family: "Noto Sans KR", sans-serif;
  padding-bottom: 30px;
  letter-spacing: -0.5px;
}
.foot .container > ul.logoArea {
  justify-content: space-between;
  font-size: 15px;
  margin-top: 36px;
  margin-bottom: 36px;
}
.foot .container > ul.logoArea > li > .logo {
  color: #535353;
}


.foot_main {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  left: 0px;
  right: 0px;
  top: 100vh;
  z-index: 1200;
  transition: top 0.6s ease-in-out;
  height: calc(var(--vh, 1vh) * 100);
  height: 100vh;
  background-color: transparent;
}

.foot_main.transition-up {
  top: 0px;
}
.footer_main_area {
  background-color: #fff;
}
.foot_main .footer_main_area {
  margin-top: auto;
  width: 100%;
  padding-bottom: 40px;
}

/* flex */
header > .container,
nav > ul,
.mainfullbox1 > .container > ul,
.mainfullbox3 > .container > ul,
.foot .container > ul {
  display: flex;
  align-items: center;
}
/* slider */
.swiper {
  width: 100%;
  height:...

JavaScript

$(function(){
    setInterval(function(){
        if($('.mainbotBk').hasClass("swiper-slide-active") === true ) {
            $(".mainfull_navi").addClass("bk");
            $("header.head").css("border","none");
            $(".logo_header").css("color","#000");
            $("nav > ul > li > a").css("color","#000");
            $("header .menu-icon .navicon").addClass("bk");
        }else {
            $(".mainfull_navi").removeClass("bk");
            $("header.head").css("border-bottom","1px solid #fff");
            $(".logo_header").css("color","#fff");
            $("nav > ul > li > a").css("color","#fff");
            $("header .menu-icon .navicon").removeClass("bk");
        }
        if($('.mainfullbox_Last').hasClass("swiper-slide-active") === true){
            $("header.head").css("background","#000");
        }else{
            $("header.head").css("background","transparent"); 
        }
    },500);

    var ww = $(window).width();
    var mySwiper = undefined;

    function initSwiper() {

    if (ww >= 640 && mySwiper == undefined) {
        mySwiper = new Swiper(".swiper-container", {
        speed: 500,
        direction: 'vertical',
        mousewheel: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        watchOverflow : true,
            on: {
                slideChange: function() {
                    setTimeout(function () {
                    mySwiper.params.touchReleaseOnEdges = false;  
                    mySwiper.params.mousewheel.releaseOnEdges = false;
                    });
                },
                reachEnd: function() {
                    setTimeout(function () {
                        mySwiper.params.touchReleaseOnEdges = true;
                        mySwiper.params.mousewheel.releaseOnEdges = true;
                    }, 500);
                },
                reachBeginning: function() {
                    setTimeout(function () {
                     ...