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

Question

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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：[未在此处插入任何内容]”

意味着您要引用的任何内容均未定义，并且浏览器引擎无法将其识别为本地对象

Swiper不是Chrome或Firefox所固有的

尝试删除页面顶部的VueJS CDN链接，您将获得与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如果您有好奇心