webpack项目引入swiper插件方案

 
// 引入轮播图插件; Pagination, Autoplay分别是分页器组件和自动播放组件; 
// 可以根据自己的需求引入对应组件
import Swiper, { Pagination, Autoplay } from "swiper"; //引入Swiper类和对应组件
import 'swiper/swiper-bundle.css' //引入Swiper的css样式
Swiper.use([Pagination, Autoplay]) //配置上方引入的组件
 

 <div class="swiper">
 	<div class="swiper-wrapper">
 		<div class="swiper-slide swiper-slide1"></div>
 		<div class="swiper-slide swiper-slide2"></div>
 		<div class="swiper-slide swiper-slide3"></div>
 	</div>
 	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
 </div>

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});