Bootstrap carousel isn't working on remote server -
i'm developing landing page website background bootstrap carousel. worked ok on local development server, since uploaded remote server bootstrap carousel stopped working there. there no errors in console , resources seems loading in correct order, can't understand why carousel broken in remote server. guess?
thanks,
the page online @ www.roughnough.com if of want have @ it. here abstraction of have on page. i'm using angular 1.1.4, bootstrap 3 , jquery 2.1. hope helps.
index page
<!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>
home view
<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, }); });
Comments
Post a Comment