Javascript 角度4 Swiper集成（js初始化）
我正在学习angular 4，并坚持将第三方模块集成到我的angular项目中 因此，我通过这个命令安装了SwiperJavascript 角度4 Swiper集成（js初始化）,javascript,node.js,angular,swiper,Javascript,Node.js,Angular,Swiper,我正在学习angular 4，并坚持将第三方模块集成到我的angular项目中 因此，我通过这个命令安装了Swipernpm install Swiper--save，然后我在.angular cli.json文件中为这个模块添加了路径 "styles": [ "../node_modules/materialize-css/dist/css/materialize.min.css", "../node_modules/swiper/dist/css/swiper.min.css",
npm install Swiper--save.angular cli.json"styles": [
"../node_modules/materialize-css/dist/css/materialize.min.css",
"../node_modules/swiper/dist/css/swiper.min.css",
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/materialize-css/dist/js/materialize.min.js",
"../node_modules/swiper/dist/js/swiper.min.js"
],
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
幻灯片1
幻灯片2
幻灯片3
...
<body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
// 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',
},
})
</script>
</body>
...
var mySwiper=new Swiper（“.Swiper container”{
//可选参数
方向：'垂直'，
循环：对，
//如果我们需要分页
分页：{
el:“.swiper分页”，
},
//导航箭头
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
}
//如果我们需要滚动条
滚动条{
el:“.swiper滚动条”，
},
})
也许更好的解决方案是使用ngx swiper包装器。它是专门为角度项目中的swiper集成而开发的：
我认为您不应该将Swiper的路径添加到
.angular cli.json.angular cli.json