通过包调用的swiper不能正常使用

Question

通过调用包，除了可以实现滑动设置其他属性不起作用； 

通过html标签引入，可以正常实现。

请问是为什么？

// index.html

<!-- Swiper -->

<div class="swiper-container">

  <div class="swiper-wrapper"> ... </div>

  <!-- Add Pagination -->

  <div class="swiper-pagination"></div>

</div>

// main.js

import 'swiper/dist/css/swiper.min.css';

import Swiper from 'swiper';

var mySwiper = new Swiper('.swiper-container', {

    pagination: '.swiper-pagination' // 分页条并不会出现

})

然而

// index.html

<link rel="stylesheet" href="./swiper.min.css">

<div class="swiper-container">

  <div class="swiper-wrapper"> ... </div>

  <!-- Add Pagination -->

  <div class="swiper-pagination"></div>

</div>

<script src="./swiper.min.js"></script>

//mian.js

var mySwiper = new Swiper('.swiper-container', {

    pagination: '.swiper-pagination' // 分页条可以显示

})

Answer 1

这两个地方引用的并不是同一个文件，如果通过import引入，则为swiper.module.js文件，于是你需要进行ES6/7的编译转化才能正常使用。