javascript - Owl Carousel.js 和 Bootstrap 主题

Question

我正在使用 Bootstrap Freelance 主题 ( http://startbootstrap.com/templates/freelancer/ )，并希望合并 Own Carousel.js ( http://www.owlcarousel.owlgraphic.com/demos/basic.html )。

我想单击图像，并在模式窗口中打开它，然后能够在图像之间向左/向右滚动。

除了最初打开的图像非常小之外，所有似乎都在工作，直到我调整窗口大小然后繁荣 - 很好!似乎在初始加载模态窗口时发生了一些事情，但是当我对窗口大小进行任何更改时，例如按 F12(对于开发工具)，图像会调整大小并且看起来很好。有什么建议么？这可能是 css 或 js 问题吗？

我的html

<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">


                    <div class="modal-body">
                        <h2>Project Title</h2>
                        <hr class="star-primary">  

                        <div class="owl-carousel">
                        <div><img src="img/portfolio/cabin.png"> </div>
                        <div><img src="img/portfolio/cake.png"> </div>
                        <div><img src="img/portfolio/circus.png"> </div>
                        </div>               

                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

是否可能与其他js文件冲突？

我在</head>之前包含了以下js文件标签 - 它们的顺序正确吗？；

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

CSS 文件按顺序排列；

owl.carousel.css
owl.theme.default.css
bootstrap.min.css

感谢您的帮助或建议。

Answer 1

好吧，我找到了答案，希望对其他人有帮助，这是事件的问题 - 而不是 show.bs.modal 它必须是 shown.bs.modal 根据 Bootstrap 文档。

此外，您还需要包含开发人员网站中提供的自动刷新插件。