首页 文章

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

提问于
浏览 次
2

我开始构建我的网站（使用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
        }
    }
});
javascript jquery wordpress twitter-bootstrap owl-carousel

1 回答

  • 2

    我觉得它现在正在运行？

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

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

    回复于

相关问题