Owl Carousel无法加载图片及轮播失效问题排查求助

使用Owl Carousel组件时出现图片不显示、轮播功能失效的问题，已加载相关JS和CSS文件，但不确定是否遗漏配置步骤；已知引入了两个jQuery文件，认为第二个文件可辅助加载后续脚本。

引入的资源文件 #

<!-- 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结构 #

<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');

排查与修复要点 #

1. 移除重复的jQuery引入
   代码中先后引入了jquery-3.2.1.min.js和jquery.js，这会覆盖之前的jQuery实例，导致Owl Carousel等依赖插件失效。必须删除后面的jquery.js，确保只引入一个jQuery文件，且放在所有依赖插件的前面。

2. 验证背景图片路径与容器高度

   • 检查images/4.jpg和images/2.jpg的路径是否正确，通过浏览器控制台的网络请求确认图片是否返回404错误。
   • 为.hs-item.set-bg添加最小高度样式，避免容器高度为0导致图片无法显示：

     .hs-item.set-bg {
       min-height: 600px; /* 根据需求调整 */
       background-size: cover;
       background-position: center;
     }
     

3. 确保DOM加载完成后初始化轮播
   将自定义JS代码包裹在$(document).ready()中，避免DOM未加载完成时执行初始化：

   $(document).ready(function() {
     // 背景设置代码
     $('.set-bg').each(function() {
       var bg = $(this).data('setbg');
       $(this).css('background-image', 'url(' + bg + ')');
     });
   
     // 轮播初始化代码
     var hero_s = $(".hero-slider");
     hero_s.owlCarousel({
       // 原配置项
     });
     // 后续操作代码
   });
   

4. 检查Owl Carousel样式加载
   通过浏览器开发者工具的Elements面板，确认轮播元素是否应用了owl-loaded、owl-stage等Owl Carousel自带样式类，排查owl.carousel.css和owl.theme.css的路径是否正确。

内容的提问来源于stack exchange，提问作者Kintu Arnold