如引入swiper的js文件
代码示例:
main.js:
requirejs.config({
baseUrl:'js/',
paths:{
'jquery':'libs/jquery-3.4.1',
'swiper':'libs/swiper.jquery.min',
'index':'apps/index'
},
//不支持define()的js文件做法
shim:{
'swiper':{
//依赖的数组
deps:['jquery'],
//导出的名字
exports:'swiper'
}
}
})
requirejs(['jquery','swiper','index'],function($,swiper,index){
})
初始化swiper文件:
define(['swiper'],function(swiper){
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
})
html文件:
<html>
<head>
<meta charset="utf-8">
<title ></title>
<link rel="stylesheet" href="css/swiper.min.css">
<script data-main='js/main.js' src='js/libs/require.js'></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body >
<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 class="swiper-scrollbar"></div>
</div>
</body>
</html>
