Successfully added HTML + Java & CSS for make a gallery slider section but now all the other sections are GONE. Send help.

Site URL: https://elephant-raspberry-f4jz.squarespace.com/about-us

Successfully added HTML + Java & CSS for make a gallery slider section at the bottom of the "Our Culture" page  but now all the other sections on that page are gone -- but it's still showing the gallery. I feel like I am so close to success! 

I'm not sure if it's something I did with the code or something else. 

Below is the code that I modified (and probably botched) from this CodePen: https://codepen.io/sfi0zy/pen/PoGvYyy

 

Code Block:

<link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' />
<script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script>

<div class='scroll-animations-example' data-scroll-container>
    <div class='scrollsection' data-scroll-section>
        <div class='item -normal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1005/300/400'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://i.imgur.com/Rdhhm02.jpg'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://i.imgur.com/UUTdpwt.jpg'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://i.imgur.com/DJaduFT.jpg'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://i.imgur.com/CWOwpwF.jpg'>
        </div>
        <div class='item -big -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://i.imgur.com/vi1E64P.jpg'>
        </div>
        <div class='item -small' data-scroll data-scroll-speed="2">
            <img class='image' src='https://i.imgur.com/Ncd1GTP.jpg'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1056/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1062/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://i.imgur.com/vi1E64P.jpg'>
        </div>
        
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://i.imgur.com/CNhqK3N.jpg'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://i.imgur.com/ZbEkM0c.jpg'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://i.imgur.com/vi1E64P.jpg'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="3">
            <img class='image' src='https://i.imgur.com/sy3SA3P.jpg'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/111/400/300'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/137/600/800'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://i.imgur.com/7NqFHwf.jpg'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://i.imgur.com/YluXeH7.jpg'>
        </div>
    </div>
</div>

<script>
  class Example {
    constructor(options) {
        this.root = options.root;

        this.init();

        setTimeout(this.showImages.bind(this), 1000);
    }

    init() {
        this.scroll = new LocomotiveScroll({
            el: this.root,
            direction: 'horizontal',
            smooth: true,
            lerp: 0.05,
            tablet: {
                smooth: true
            },
            smartphone: {
                smooth: true
            }
        });

        this.images = this.root.querySelectorAll('.image');

        [].forEach.call(this.images, (image) => {
            image.addEventListener('click', () => {
                image.classList.add('-clicked');
                this.hideImages();
            });
        });
    }

    showImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-clicked');
            image.classList.add('-active');
        });
    }

    hideImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-active');
        });

        setTimeout(this.showImages.bind(this), 2000);
    }
}

window.addEventListener('DOMContentLoaded', (event) => {
    const example = new Example({
        root: document.querySelector('.scroll-animations-example')
    });
});
</script>

 

 

Custom Css: 

 

//CULTURE PHOTO SLIDER//
#block-yui_3_17_2_1_1662153700056_214084 .scroll-animations-example {
    > .scrollsection {
        padding: 10vh 10vh 10vh 10vmax;
        min-width: 550vh;
    }

    > .scrollsection > .item {
        display: inline-block;
        position: relative;
        margin: 0 -30vh 0 3vh;
    }

    > .scrollsection > .item::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    > .scrollsection > .item.-big {
        height: 80vh;
        width: 60vh;
    }

    > .scrollsection > .item.-big.-horizontal {
        height: 60vh;
        width: 80vh;
    }

    > .scrollsection > .item.-normal {
        height: 60vh;
        width: 45vh;
        z-index: 1;
    }

    > .scrollsection > .item.-normal.-horizontal {
        height: 45vh;
        width: 60vh;
    }

    > .scrollsection > .item.-normal:nth-of-type(3n) {
        bottom: 5vh;
    }

    > .scrollsection > .item.-normal:nth-of-type(4n) {
        bottom: -5vh;
    }

    > .scrollsection > .item.-small {
        height: 40vh;
        width: 30vh;
        z-index: 2;
    }

    > .scrollsection > .item.-small.-horizontal {
        height: 30vh;
        width: 40vh;
    }

    > .scrollsection > .item.-small:nth-of-type(3n) {
        bottom: 13vh;
    }

    > .scrollsection > .item.-small:nth-of-type(4n) {
        bottom: -13vh;
    }

    > .scrollsection > .item > .image {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(1);
        opacity: 0;
        pointer-events: none;
        transform: translateX(0) translateY(0) scale(1);
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item:nth-of-type(4n) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: 0;
    }

    > .scrollsection > .item:nth-of-type(4n - 1) > .image {
        transform: translateX(30vh) translateY(30vh) scale(.8);
        transition-delay: .05s;
    }

    > .scrollsection > .item:nth-of-type(4n - 2) > .image {
        transform: translateX(-30vh) translateY(30vh) scale(.8);
        transition-delay: .1s;
    }

    > .scrollsection > .item:nth-of-type(4n - 3) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: .15s;
    }

    > .scrollsection > .item > .image.-active {
        transform: translateX(0) translateY(0) scale(1);
        opacity: .8;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item > .image.-clicked {
        transform: translateX(0) translateY(0) scale(5);
        opacity: 0;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item > .image.-active:hover {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(0);
        opacity: 1;
        cursor: pointer;
    }
}

With effect like this, it usually affect on other sections. It is complex so I can't help.

You try posting to some groups on Facebook, eg: Squarespace Customization Resource Group