Блог

Swiper инициализируется без проблем, по какой-то причине разбивка на страницы (и все остальное …) не работает.

Я использую webpack на laravel (5.8), версия swiper, которую я использую, — 6.4.5. Ошибок в консоли нет

Это мой код:

 // import Swiper JS
import Swiper, { Pagination } from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

// configure Swiper to use modules
Swiper.use([Pagination]);


var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop: true,
    autoplay: true,
    grabCursor: true,
    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
 

Результат:
Swiper создан, разбивка на страницы не работает, автозапуск не работает, ничего не работает, создается только swiper

Мне удалось решить эту проблему, я опубликую свой ответ, если у кого-нибудь возникнет такая же проблема.

Версия swiper, которую я использую в настоящее время, содержит интеграцию с vue, я не использую интеграцию с vue, потому что я работаю с версией 2 vue.js , swiper нуждается в версии 3 для vue.js . Итак, я оценил свой экземпляр vue, и все начало работать, проблема заключалась в конфликте между vue.js и Свипер.

В документации вы импортируете таким же образом для модулей vue и ES, поэтому я предполагаю, что существует какой-то конфликт.

Поэтому я переместил свой импорт swiper после vue.js декларация:

 /**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

require('./scripts/swiper');
 

И теперь все работает