javascript - 卡在 Owl Carousel 中 - 无法正常工作

Question

我开始构建我的网站(使用 Boostrap 前端框架的 WordPress 自定义主题)。我在其中放入了内部文件，但仍然无法正常工作。一切都可见，但我无法滑动它。我已检查文件是否已正确加载。

这些是我在页面上加载的文件- 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 但没有结果。

有人遇到过同样的问题吗？

---

我尝试设置一个 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/