Javascript 被猫头鹰旋转木马卡住了-罐子'；我做不到

我开始建立我的网站（WordPress自定义主题，带有Boostrap前端框架）。 我把里面的文件放进去了，但我还是不能让它工作。 一切都看得见，但我不能滑动它。 我已检查文件是否正确加载

这些是我在页面上加载的文件 -jquery-1.11.0.min.js（来自bootstrap）

• jquery.min.js（与owl文件夹一起提供）
• 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，但没有结果

有人有过同样的问题吗

---

我试着设置一个JSFIDLE，但不知怎么的，旋转木马根本没有出现。 这里是链接，所以你可以看到代码

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>

---

我想它现在正在运行

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

---

演示：

你的提琴不起作用的原因是你没有在你加载的所有资源前面加上https://前缀。https版本似乎也无法在您的服务器上运行。请仅粘贴您在制作转盘时使用的代码。请使用jQuery（文档）。就绪（函数（$）{your code here}）@网页设计Thanks@sagar是的

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