与猫头鹰旋转木马卡住 - 无法使其工作

Question

我开始建立我的网站（WordPress的自定义主题与Boostrap前端框架）。 我把里面的文件，但我仍然没有得到它的工作。 一切都可见，但我无法滑动它。 我已检查文件是否正确加载。

这些是我所加载的页面 上的文件 - jQuery的1.11.0.min.js（自举）

• jquery.min.js（连在一起，与猫头鹰文件夹）

• owl.carousel.min.js

• owl.carousel.min.css

• owl.theme.default.min.css

我试着转动jquery-1.11.0.min.js，但保持jquery.min.js。 我也尝试关闭jquery.min.js并保持jquery-1.11.0.min.js但没有结果。

有没有人有同样的问题？

---

我试着设置一个jsfiddle，但不知何故传送带根本没有显示出来。 无论如何，这里是链接，所以你可以看到代码。

https://jsfiddle.net/ykhu3aa0/3/

HTML

<div class="loop owl-carousel owl-theme owl-loaded owl-drag"> 
     <div class="owl-stage-outer"> 
      <div class="owl-stage" style="transition: 0.25s; width: 5880px; transform: translate3d(-2572px, 0px, 0px);"> 
       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item active" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item active center" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item active" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item active" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 

       <div class="owl-item cloned" style="width: 235px; margin-right: 10px;"> 
        <div class="item"> 
         <img src="http://via.placeholder.com/350x220"> 
        </div> 
       </div> 
      </div> 

     </div> 

     <div class="owl-nav disabled"><div class="owl-prev">prev</div><div class="owl-next">next</div></div> 

     <div class="owl-dots"> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 

Javascript

$('.loop').owlCarousel({ 
    center: true, 
    items:2, 
    loop:true, 
    margin:10, 
    responsive:{ 
     600:{ 
      items:4 
     } 
    } 
}); 

Answer 1

它现在正在运行，我想？

$(function(){ 
    $('.loop').owlCarousel({ 
     center: true, 
     items:2, 
     loop:true, 
     margin:10, 
     responsive:{ 
      600:{ 
       items:4 
      } 
     } 
    }); 
}); 

演示：https://jsfiddle.net/ykhu3aa0/4/