Question

我正在使用vue-cli工具进行开发，而且我无法让Swiper.js npm包在我的网站上运行。 TLDR 我已经加载了导入，js初始化和css，但是swiper无法移动到第一张幻灯片之后的其他幻灯片并且在页面上保持静态

Here is a demo of what I'm trying to implement和here is the source code for that demo.

我将包中的js和css文件直接导入特定视图home.vue，我尝试使用它。

<script>

    //import js and css files
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'

    export default {}

    //initialize swiper
    var swiper = new Swiper('.swiper-container'); 

</script>

我还尝试将这些文件全局导入main.js文件，尽管这似乎会产生相同的结果。

以下是我在home.vue模板中放置的演示中的HTML：

<template>
  <div>
    <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
    </div>
  </div>
</template>

这将以与演示相同的方式呈现到页面（幻灯片1显示，没有其他可见），但我无法移动到不同的幻灯片。

除了接受的答案外，视图中的初始化也有效：

<script>

  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'

  export default {
    mounted(){
      //initialize swiper when document ready  
      var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      loop: true
      })        
    }
  }

</script>

Answer 1

正如文档所述，使用jquery.onready或document.onload函数。 http://idangero.us/swiper/get-started/#.WWEJplGQyUk

window.onload = function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper ('.swiper-container', {
       // Optional parameters
       direction: 'vertical',
       loop: true
    });
};

vue.js：外部npm包功能不起作用

1 个答案: