如何在 javascript 中定义'swiper' object？

Question

I'm trying to display a horizontal timeline on my HTML page. I've found this template online, where the timeline can be scrolled. However, when I try to open the page, I'm receiving the following error "ReferenceError: Swiper not defined" in console, and unable to scroll the timeline. How do I fix this? Below is my code.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script>
    const data = [{
            dateLabel: 'January 2017',
            title: 'Gathering Information'
        },
        {
            dateLabel: 'February 2017',
            title: 'Planning'
        },
        {
            dateLabel: 'March 2017',
            title: 'Design'
        },
        {
            dateLabel: 'April 2017',
            title: 'Content Writing and Assembly'
        },
        {
            dateLabel: 'May 2017',
            title: 'Coding'
        },
        {
            dateLabel: 'June 2017',
            title: 'Testing, Review & Launch'
        },
        {
            dateLabel: 'July 2017',
            title: 'Maintenance'
        }
    ];

    new Vue({
        el: '#app',
        data: {
            steps: data,
        },
        mounted() {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                paginationClickable: true,
                grabCursor: true,
                paginationClickable: true,
                nextButton: '.next-slide',
                prevButton: '.prev-slide',
            });
        }
    })
</script>

Answer 1

The error here

"ReferenceError: [Insert anything here] not defined"

Means that whatever you're trying to reference hasn't been defined and the browser engine does not recognize it as a native object

Swiper is not something Chrome or Firefox are born with

Try removing the VueJS CDN link on the top of your page and you'll get the same error for vue, so....

Include the Swiper library like you did with Vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js" integrity="sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4=" crossorigin="anonymous"></script>

Here's where Swiper variable is defined if you're curious