Как мне реализовать горизонтальную прокрутку раздела, используя как bootstrap, так и fullpage.js?

Question

Я пытаюсь объединить bootstrap и fullpage.js для создания веб-сайта с вертикальной прокруткой и разделом горизонтальной прокрутки, который управляется отдельной навигацией.Я пытаюсь реализовать раздел страницы так же, как этот веб-сайт (http://www.lottanieminen.com/). Я пытаюсь реализовать горизонтальную прокрутку на странице «Портфолио». Вот мой код: `

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta name="author" content=" ">

<!-- Bootstrap CSS -->
<link href="img/mylogo.ico" rel="shortcut icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/fullpage.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<title>Stephanie Daniels</title>

<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
    <img src="img/mylogo.png" alt="mylogo" style="display: inline-block;">
    <span style="display: inline-block;"></span>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" role="navigation">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#portfolio" data-toggle="tab">Portfolio</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
        </ul>
    </div>
</nav>


<section id="home">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="center">
                    <img src="img/nameheader.png" alt="nameheader" class="img-fluid" size="contain" width="40%" />
                    <div class="row">
                        <div class="col-12">
                            <img src="img/DesktopHomebox.png" alt="desktophomebox" class="img-fluid desktophomebox" size="contain" width="50%" />
                        </div>
                    </div>
                </div>

            </div>

        </div>


    </div>
</section>





<section id="about">
    <div class="container-fluid">
        <div class="row">

            <div class="col-sm-5">
                <img src="img/about.png" alt="aboutme" class="img-fluid aboutme" margin="0px" />

            </div>
            <div class="col-sm-6">
                <h1 align="center">ABOUT</h1>
                <h2 align="center"> Hi! I’m Stephanie...</h2>
                <p align="center" class="big">I am Nigerian and currently a second year student at the University of Kent, studying Digital Arts. I have always been interested in graphics and digitalised work but I decided I was going to turn this interest into profession by combining my ICT skills with my fine art skills. <br><br>I am quite proficient in a range of design software which include
                    <span class="software">Adobe Illustrator</span> and <span class="software">InDesign</span>. My interest lies more in designing than developing as I am a very visual-oriented person. <br><br>Also, I am very energetic, although I generally enjoy being indoors and working with other people. This is just a brief overview of myself. Feel free to explore the site!</p>
            </div>

        </div>

    </div>
</section>


<section id="portfolio">
    <div class="container-fluid">


        <div class="row">
            <div class="col-sm-4">
                <h1 align="center">PORTFOLIO</h1>
            </div>
        </div>
    </div>
</section>



<section id="contact"> </section>
<footer class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <p> &copy; Stephanie Daniels 2018 </p>
        </div>
    </div>
</footer>


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko -lightbox/5.3.0/ekko-lightbox.js">


</script>
<script src="js/fullpage.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
    new fullpage('#fullpage', {

    });

</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.min.js"></script>




<script>
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });

</script>
<script>
    $(function() {
        $('#mainNav a').on('click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1500, 'easeInOutExpo');
            return false;
        });

        // Activate scrollspy to add active class to navbar items on scroll
        $('body').scrollspy({
            target: '#mainNav'
        });

        // Closes responsive menu when a link is clicked
        $('.navbar-collapse>ul>li>a').click(function() {
            $('.navbar-collapse').collapse('hide');
        });
    });

</script>

`