为什么猫头鹰轮播无法加载图像

Question

我在我的项目中使用猫头鹰旋转木马，但它不显示图像，也没有幻灯片放映，也许我错过了一些我不知道的东西，但我已正确加载所有 JS 和 CSS 文件。

这是我正在使用的文件列表：

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/slicknav.min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/magnific-popup.css">

<link rel="stylesheet" href="css/owl.theme.css">

<!-- MAIN CSS -->
<link rel="stylesheet" href="css/tooplate-style.css">

<!-- JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>

然后这是我的轮播 HTML 代码，覆盖类只是一个黑色背景，帮助我的导航栏。我已经包含了 jquery.js 文件，因为它有助于处理它下面的脚本。

<section id="home" class="hero-section">
  <div class="overlay"></div>
  <div class="hero-slider owl-carousel">
    <div class="hs-item set-bg" data-setbg="images/4.jpg">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 col-lg-7 text-white">
            <span>New Arrivals</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus-pendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
            <a href="" class="site-btn sb-line">DISCOVER</a>
          </div>
        </div>
      </div>
    </div>
    <div class="hs-item set-bg" data-setbg="images/2.jpg">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 col-lg-7 text-white">
            <span>New Arrivals</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus-pendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
            <a href="" class="site-btn sb-line">DISCOVER</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="slide-num-holder" id="snh-1"></div>
  </div>
</section>

然后是我的 JavaScript 代码

// BACKGROUND
$('.set-bg').each(function() {
  var bg = $(this).data('setbg');
  $(this).css('background-image', 'url(' + bg + ')');
});

//CAROUSEL
var hero_s = $(".hero-slider");
hero_s.owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  items: 1,
  dots: true,
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  navText: ['<i class="flaticon-left-arrow-1"></i>', '<i class="flaticon-right-arrow-1"></i>'],
  smartSpeed: 1200,
  autoHeight: false,
  autoplay: true,
  onInitialized: function() {
    var a = this.items().length;
    $("#snh-1").html("<span>1</span><span>" + a + "</span>");
  }
}).on("changed.owl.carousel", function(a) {
  var b = --a.item.index, a = a.item.count;
  $("#snh-1").html("<span> " + (1 > b ? b + a : b > a ? b - a : b) + "</span><span>" + a + "</span>");
});

hero_s.append('<div class="slider-nav-warp"><div class="slider-nav"></div></div>');
$(".hero-slider .owl-nav, .hero-slider .owl-dots").appendTo('.slider-nav');

如果我在某个地方做错了，请仔细阅读并纠正我。谢谢

我已经使用 JavaScript 设置了背景图像以减少加载时间，但它不起作用，我知道我包含两个 jQuery 文件，但我认为第二个文件有助于加载其下面的其他脚本。

Answer 1

$('.set-bg').each(function() {
    var bg = $(this).data('setbg');
    $(this).css('background-image', 'url(' + bg + ')');
});

var hero_s = $(".hero-slider");
hero_s.owlCarousel({
    loop: true,
    margin: 0,
    nav: true,
    items: 1,
    dots: true,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    navText: ['<i class="flaticon-left-arrow-1"></i>', '<i class="flaticon-right-arrow-1"></i>'],
    smartSpeed: 1200,
    autoHeight: false,
    autoplay: true,
    onInitialized: function() {
        var a = this.items().length;
        $("#snh-1").html("<span>1</span><span>" + a + "</span>");
    }
})