1
編集：左または右のいずれかのアイコンをクリックすると、ページの下部に表示されます。私はそれが＃本当のスピードのためだと思います。私がスタンドアロンのカルーセルページを持っているとき、これは完全に動作します。しかし、私がデザインしているウェブサイトと一緒に追加しようとすると、下り坂になります。統合時にブートストラップカルーセルが機能しない
編集＃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 & 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>© 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>
任意のアイデア何が起こっていると？
テストする方法はありますか？ – cralfaro
私はしようとしていますが、JSfiddleはいつも私を嫌っています。 –
@ThomasHuttonスタックオーバーフローのコードスニペット機能を使用して追加してください。 – MattD