2016-03-24 47 views
1

編輯:當我點擊左側或右側圖標時,它只是將我引向頁面底部。我想這是因爲#truespeed.when我有一個獨立的輪播頁面,這完美的作品。但是當我試圖將它與我的網站一起添加時,它正在走下坡路。Bootstrap Carousel在集成時無法工作

編輯#2:我剛剛再次確認,如果輪播編碼器在獨立頁面上工作,並且它確實如此。我檢查了所有的外部頁面鏈接,並且它們工作正常。我真的很茫然。

這裏是我的靜態頁面(用於導航欄,頁眉和頁腳):

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="robots" content="index,follow"> 
     <title>{{var pageTitle}}</title> 
     <link rel="icon" type="image/png" href="{{var protoHost}}FavIconsuperawesome32.png"> 
     <link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="{{var protoHost}}css/main.css"> 
     <link rel="stylesheet" href="{{var protoHost}}css/print.css"> 
     <link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     {{var extraHeaders}} 
    </head> 
    <body> 
     <div class="page"> 
      <div class="container-fluid"> 
       <div class="col-xs-10 col-sm-3 branding"> 
        <a class="imgCon" href="{{var protoHost}}"> 
         <img alt="superawesome Internet Services" src="{{var protoHost}}img/SuperAwesomeInternet.png"> 
        </a> 
       </div> 
       <div class="container-fluid"> 
       <div class="brandingspacer"> 
        <a class="inlineParagraph socialspacer" href="https://www.facebook.com/superawesomeInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a> 
       </div> 
       <div class="col-xs-0"> 
        <a class="inlineParagraph socialspacer" href="https://twitter.com/superawesomecanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a> 
       </div> 
       <div class="col-xs-0"> 
        <a class="inlineParagraph socialspacer" href="https://www.instagram.com/superawesomeinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a> 
       </div> 
       <div class="col-xs-0"> 
        <a class="inlineParagraph socialspacer" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a> 
       </div> 
       <div class="col-xs-0"> 
        <a class="inlineParagraph socialspacer" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a> 
       </div> 
       <div class="col-xs-0"> 
       <p class="socialmediaspacer headerspacer inlineParagraph"><i class="fa fa-phone fa-lg"></i><a href="tel:613-865-7733" style="color: black"> 613-865-7733</a></p> 
       <p class="headercontact headerspacer inlineParagraph"><i class="fa fa-envelope fa-lg"><a href="mailto:[email protected]" style="color: black"></i> [email protected]</a></p> 
       </div> 
       <div class="inlineParagraph buttonspacer"> 
       <button type="button" class="btn btn-primary">My Account</button> 
       </div> 
      </div> 
      </div> 
      <nav class="navbar navbar-custom"> 
        <div class="visible-xs-block visible-sm-block visible-md-block"> 
         <button id="btnToggleNavMenu" type="button" name="button"><i class="fa fa-bars"></i></button> 
        </div> 
        <div class="col-xs-0 container-fluid" data-expand="false"> 
         <p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p> 
         <p class="inlineParagraph navbarspacer"><a href="#"><i class="fa fa-users navIcon fa-lg"></i>Test Services</a></p> 
         <p class="inlineParagraph navbarspacer"><a href="/contact"><i class="fa fa-comment navIcon fa-lg"></i>Contact Us!</a></p> 
        </div> 

      </nav> 

      <div class="container"> 
       <div class="Location inlineParagraph printHide"> 
        <form> 
        Please enter your postal code to check for availability: 
        <input type="text" name="locationcheck"> 
        </form> 
       </div> 
       <div class="smallspacer"></div> 
       {{var content}} 
      </div> 
      <footer class="footer"> 
       <div class="container"> 
        <div class="row"> 
         <a class="col-xs-6 col-md-2"href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a> 
         <a class="col-xs-6 col-md-2"href="{{var protoHost}}TermsOfService">Terms Of Service</a> 
         <a class="col-xs-6 col-md-2"href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a> 
         <a class="col-xs-6 col-md-2"href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a> 
         <a class="col-xs-6 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a> 
         <a class="col-xs-6 col-md-2"href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a> 
        </div> <br> 
        <div class="col-xs-12"> 
        <p>&copy; 2016 superawesome Internet Services - All Rights Reserved</p> 
        </div> 
       </div> 
      </footer> 
     </div> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <script src="{{var protoHost}}js/navCode.js"></script> 
     {{var extraScripts}} 

    </body> 
</html> 

當我加入我的旋轉木馬代碼到我的主頁,所有的雕文的圖標彈出,而圓形底部。但是他們都沒有工作。

我的主頁代碼:

<?php 
    $this->setExtraHeader('<link rel="stylesheet" href="{{var protoHost}}css/home.css">'); 
    $this->setExtraHeader('<meta name="description" content="superawesome is a brockville Internet and Phone provider for your needs. Let\'s get connected!">'); 
?> 
<div class="contactspacer"></div> 
<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div id="superawesomeslider" class="carousel slide" data-ride="carousel"> 
     <!-- indicators dot nov --> 
     <ol class="carousel-indicators"> 
      <li data-target="#superawesomeslider" data-slide-to="0" class="active"></li> 
      <li data-target="#superawesomeslider" data-slide-to="1"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="img/Internet.jpg" alt="Internet Services" /> 
       <div class="carousel-caption"> 
       <h1>superawesome Internet Services</h1> 
       </div> 
      </div> 
     <div class="item"> 
      <img src="img/Phone.jpg" alt="superawesome Internet Services" /> 
      <div class="carousel-caption"> 
       <h1>Phone</h1> 
      </div> 
     </div> 
     </div> 
     <!-- Controls or next and prev buttons --> 
     <a class="left carousel-control" href="#superawesomeslider" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#superawesomeslider" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 

     </div> 
    </div> 
</div> 
</div> 

什麼回事任何想法?

+0

你能提供一些方法來測試它嗎? – cralfaro

+0

我正在嘗試,但JSfiddle一直恨我。 –

+0

@ThomasHutton嘗試使用Stack Overflow的代碼片段功能添加它。 – MattD

回答

0

我找到了答案!它在我的bootstrap.min.js鏈接中。

它是:

<script src="js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

但是當你在本地連接性,完整性和crossorigin搞砸了,所以我把他們趕走,和BAM!有用。

Huzzah!