webpack項目中通過npm安裝和使用Swiper

Swiper的npm安裝

1. npm安裝

npm install swiper --save-dev

2. 添加HTML元素

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

3. 在入口文件中引入CSS樣式和Swiper

• 我這里是src/js/index.js文件中：

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

4. 如果需要使用分頁器等功能，需要修改導入Swiper的代碼

import Swiper from 'swiper' (修改為)=>  import Swiper, { Navigation, Pagination } from 'swiper'

5. 初始化Swiper

Swiper.use([Navigation, Pagination]); // 使用需要的功能
const mySwiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination', // 分頁器
  },
  navigation: {
    nextEl: '.swiper-button-next', //切換箭頭
    prevEl: '.swiper-button-prev',
  },
})