Question

我正在为website开发一个带有后台bootstrap轮播的目标网页。一切都在我的本地开发服务器上正常工作，但自从我将它上传到远程服务器后，bootstrap轮播停止在那里工作。控制台中没有错误，并且所有资源似乎都以正确的顺序加载，因此我无法理解为什么远程服务器中的轮播已损坏。有什么猜测吗？

谢谢，

Answer 1

如果你们中的任何人想看一下，该网页将在www.roughnough.com上重新上线。这是我在页面上的内容的抽象。我正在使用Angular 1.1.4，Bootstrap 3和Jquery 2.1。希望这会有所帮助。

索引页

<!doctype html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Index Page</title>

    <link rel="stylesheet" href="app/css/bootstrap.css">
    <link rel="stylesheet" href="app/css/style.css">

</head>

<body>

    <div id="view" ng-view></div>


    <link rel="stylesheet" href="app/css/bootstrap-modal-bs3patch.css">
    <link rel="stylesheet" href="app/css/bootstrap-modal.css">

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="app/js/bootstrap.js"></script>
    <script src="vendor/js/angular.js"></script>
    <script src="vendor/js/angular-translate.min.js"></script>
    <script src="app/js/app.js"></script>
    <script src="app/js/main.js"></script>
    <script> Google Analytics script </script>
</body>
</html>

主页视图

<div class="fill background-img">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="fill" style="background-image:url('app/img/1.jpg');">
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('app/img/2.jpg');">
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('app/img/3.jpg');">
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('app/img/4.jpg');">
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('app/img/5.jpg');">
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('app/img/6.jpg');">
            </div>
        </div>
    </div>
</div>
</div>

<div class="front-logo-mask fill">
    <div class="fill" style="background-image:url('app/img/Logo_Mask.png');">

    </div>
</div>

</html>

main.js

$(window).load(function() {        

        $('.carousel').carousel({
            interval: 3000,
            wrap: true,
        });

});

Bootstrap carousel无法在远程服务器上运行

1 个答案: