如何在javascript中定义'swiper'对象？

Question

我正在尝试在 HTML 页面上显示水平时间线。我在网上找到了这个模板，可以滚动时间线。但是，当我尝试打开该页面时，我在控制台中收到以下错误 "ReferenceError: Swiper not defined"，并且无法滚动时间线。我该如何解决？下面是我的代码。

<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

错误在这里

"ReferenceError: [Insert anything here] not defined"

意味着您尝试引用的内容尚未定义，浏览器引擎无法将其识别为本机对象

Swiper 不是 Chrome 或者 Firefox 与生俱来的东西

尝试删除页面顶部的 VueJS CDN link，您将在 vue 中遇到相同的错误，所以....

像使用 Vue 一样包含 Swiper 库

<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 如果你好奇的话

如何在javascript中定义'swiper'对象？

How to define 'swiper' object in javascript?

html

javascript

swiper

vue.js