Как определить объект «swiper» в JavaScript? - PullRequest
Новая
       5

Как определить объект «swiper» в JavaScript?

0 голосов
/ 06 октября 2019

Я пытаюсь отобразить горизонтальную временную шкалу на моей HTML-странице. Я нашел этот шаблон онлайн, где можно прокрутить временную шкалу. Тем не менее, когда я пытаюсь открыть страницу, я получаю следующую ошибку «ReferenceError: Swiper не определен» в консоли, и я не могу прокрутить временную шкалу. Как я могу это исправить? Ниже мой код. 

<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>

1 Ответ

0 голосов
/ 06 октября 2019

Ошибка здесь

"ReferenceError: [Вставить что-нибудь сюда] не определено"

Означает, что все, на что вы пытаетесь ссылаться, не было определено идвижок браузера не распознает его как собственный объект

Swiper - это не то, с чем Chrome или Firefox рождаются с

Попробуйте удалить ссылку VueJS CDN в верхней части страницы, и вы получитета же ошибка для vue, так что ...

Включите библиотеку Swiper, как вы это делали с 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>

Здесь определяется переменная Swiper если вы 'любопытно

...