滑动导航不起作用-Webpack（Laravel）答案

【问题标题】：Swiper navigation not working - Webpack (Laravel)滑动导航不起作用-Webpack（Laravel）
【发布时间】：2020-12-23 06:09:34
【问题描述】：

Swiper 正在初始化没有问题，由于某种原因，分页（以及其他一切......）无法正常工作。

我在 laravel (5.8) 上使用 webpack，我使用的 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,
    },
});

结果：创建了滑动器，分页不起作用，自动播放不起作用，只有滑动器被创建，没有任何工作

【问题讨论】：

标签： laravel webpack swiper swiperjs

【解决方案1】：

我已经解决了这个问题，如果有人有同样的问题，我会发布我的答案。

我当前使用的 swiper 版本包含 vue 集成，我没有使用 vue 集成，因为我正在使用 vue.js 的第 2 版，swiper 需要 vue.js 的第 3 版。所以我推荐了我的 vue 实例，一切都开始工作了，问题是 vue.js 和 Swiper 之间的冲突。

在文档中，您以相同的方式导入 vue 和 ES 模块，所以我猜测存在某种类型的冲突。

所以我在 vue.js 声明之后移动了我的 swiper 导入：

/**
 * 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');

现在一切正常

【讨论】：