集成时Bootstrap Carousel不工作

时间:2016-03-24 17:18:08

标签: jquery html css twitter-bootstrap

编辑:当我点击左侧或右侧图标时,它只会激发我到页面底部。我想这是因为#truespeed。当我有一个独立的轮播页面时,这非常有效。但是当我尝试将它与我正在设计的网站一起添加时,它就会走下坡路。

编辑#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:info@superawesome.ca" style="color: black"></i> info@superawesome.ca</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>

当我将我的轮播代码添加到我的主页时,会弹出所有的Glyph图标,以及底部的圆圈。但它们根本都不起作用。

我的主页代码:

    <?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>

有关于发生了什么的任何想法?

1 个答案:

答案 0 :(得分:0)

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

它是:

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

但是当你在本地链接时,完整性和交叉信息会搞砸,所以我删除了它们,而BAM!它有效。

好哇!