0

我正在使用 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文件冲突吗？

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

<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

感谢您的任何帮助或建议。

4

1 回答 1

3

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

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

于 2014-08-28T14:19:44.650 回答