Owlcarousel设置在服务器上载时显示无

Question

我正在尝试在目标网页上设置一个猫头鹰轮播。当我从我的工作目录中浏览它时它工作正常。但是当我在服务器上上传它（甚至在本地服务器上）时，它在css中设置display：none。 我尝试更改css和js文件，但它无法正常工作。

这是我的代码---

＆＃13;

＆＃13;

$(document).ready(function(){
  jQuery("#main-slider").owlCarousel({
	autoplay:true,
	loop:true,	
	animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
  });
});

＆＃13;

<div id="main-slider" class="owl-carousel owl-theme">
    <div class="item"> 
      <img src="img/slider.jpg" alt="" />
    </div> 
    <div class="item"> 
      <img src="img/slider2.jpg" alt="" />
    </div> 
    <div class="item"> 
      <img src="img/slider3.jpg" alt="" />
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您在此页面上多次使用＃main-slider ID，则可能会出错。只需使用一次。