Question

我正在学习角度4并坚持将第三方模块集成到我的角度项目中。

所以，我已经通过此命令npm install swiper --save安装了Swiper，然后我在.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"
],

我还在示例

中添加了html

<!-- 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>

但是，初始化此模块的js部分的最佳方法是什么？

<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>

Answer 1

也许更好的解决方案是使用ngx-swiper-wrapper。它专门用于将swiper集成到角度项目中：

github: ngx-swiper-wrapper

Angular 4 Swiper集成（js初始化）

1 个答案: