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

时间:2017-08-07 11:40:23

标签: javascript jquery wordpress twitter-bootstrap owl-carousel

我开始构建我的网站(使用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但不知何故旋转木马根本没有显示出来。 这是链接,所以你可以看到代码。

Sharing data with angular


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

1 个答案:

答案 0 :(得分:2)

现在正在运行,我想?

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

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