猫头鹰轮播不起作用(js无法加载)

时间:2020-01-04 09:23:48

标签: javascript angular owl-carousel

我正在尝试将owl-carousel滑块添加到我的angular 7项目中 问题是owl.carousel.js无法加载

我已经将其添加到angular.json->脚本[] 但不起作用

这是我的angular.json->脚本

"scripts": [
              "src/assets/ltr/js/jquery-2.2.4.min.js",
              "src/assets/ltr/js/bootstrap.min.js",
              "src/assets/ltr/js/themejs/libs.js",
              "src/assets/social-js/card.js",
              "src/assets/ltr/js/unveil/jquery.unveil.js",
              "src/assets/ltr/js/countdown/jquery.countdown.min.js",
              "src/assets/ltr/js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js",
              "src/assets/ltr/js/jquery-ui/jquery-ui.min.js",
              "src/assets/ltr/js/bootstrap-notify.min.js",
              "src/assets/ltr/js/themejs/application.js",
              "src/assets/ltr/js/themejs/homepage.js",
              "src/assets/ltr/js/themejs/so_megamenu.js",
              "src/assets/ltr/js/themejs/toppanel.js",
              "src/assets/ltr/js/owl-carousel/owl.carousel.js",
              "src/assets/ltr/js/crypto-js/CryptoJS.js"
            ]

和component.html

  <div id="so-slideshow">
    <div class="module slideshow--home8 no-margin" >
      <!-- <app-carousel [source]="sliderData" [imageDefault]="'1920x550.jpg'"></app-carousel> -->
      <div class="item">
        <a href="#"><img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive"></a>
      </div>
      <div class="item">
        <a href="#"><img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive"></a>
      </div>
      <div class="item">
        <a href="#"><img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive"></a>
      </div>
      <!--<div class="loadeding"></div>-->
    </div>
  </div>
</section>

它像这样显示

enter image description here

必须是这样

enter image description here

1 个答案:

答案 0 :(得分:0)

如果无法从angular.json使用,请按如下所述在index.html文件中添加此路径:

JS路径

<script src="assets/ltr/js/owl-carousel/owl.carousel.js"></script>

CSS路径

<link rel="stylesheet" href="assets/ltr/css/owl.carousel.css">

或者确保您的路径正确。将其检查到已安装的软件包中,然后从那里复制确切的路径。