Code Works in codepen but not in blog post. Options

[P4R4G0N]

Hello,
Im new here, so please bear with me if this is not the right place to ask this.

I have a small blogger blog, and I want to add an image comparison slider in my posts.
The problem I'm facing is the code works fine in codepen but when I add it to my blogger post it doesn't, and gives

"Uncaught TypeError: $(...).imagesCompare is not a function"

Below is the code, I can also provide more screenshots and the link for the original code if you want.

CODE

<link rel="stylesheet" href="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/726deb3b86a5f83c0855955195e0fe7f4a3680fd/images-compare.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/f9a1123c627ee1f48bed97ba22a7f025ad107b4b/jquery.images-compare-1.js"></script>
<script type="text/javascript">
    $(function () {
        var imagesCompareElement = $('.js-img-compare').imagesCompare();
        var imagesCompare = imagesCompareElement.data('imagesCompare');
        var events = imagesCompare.events();

        imagesCompare.on(events.changed, function (event) {
            console.log(events.changed);
            console.log(event.ratio);
            if (event.ratio < 0.4) {
                console.log('We see more than half of the back image');
            }
            if (event.ratio > 0.6) {
                console.log('We see more than half of the front image');
            }

            if (event.ratio <= 0) {
                console.log('We see completely back image');
            }

            if (event.ratio >= 1) {
                console.log('We see completely front image');
            }
        });

        $('.js-front-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(1, true);
        });

        $('.js-back-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(0, true);
        });

        $('.js-toggle-btn').on('click', function (event) {
            event.preventDefault();
            if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
                imagesCompare.setValue(1, true);
            } else {
                imagesCompare.setValue(0, true);
            }
        });
    });
</script>


<div class="page-container">
    <div class="js-img-compare">
        <div style="display: none;">
            <span class="images-compare-label">Before</span>
            <img src="https://freesvg.org/img/1286146771.png" alt="Before">
        </div>
        <div>
            <span class="images-compare-label">After</span>
            <img src="https://freesvg.org/img/navyblue.png" alt="After">
        </div>
    </div>
    <div>
        <button class="btn js-front-btn">Show front image</button>
        <button class="btn js-back-btn">Show back image</button>
        <button class="btn js-toggle-btn">Toggle</button>
    </div>
</div>

Please help me with it to ake it work.