0
私はBSカルーセルを使用しようとしていますが、私はtest page hereを作っています。私はそれを見ますが、動かない/滑りません。私はこことGoogleで検索しました。これはカルーセルで初めての試みです。私は純粋なCSSスライダーを使用していましたが、私の友人のページに必要なものに適合しませんでした。 何が間違っているのか分かりません。前もって感謝します。ブートストラップ3カルーセルは動作しているがスライドしていません。
<!--custom css in custom.css page-->
.carousel-control {
padding-top:10%;
width:5%;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
-ms-transform: translate3d(-33%, 0, 0);
-o-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Peter Scotts Competitive Edge</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<script type="text/javascript">
$('#openBtn').click(function(){
\t $('#myModal').modal({show:true})
}); \t
</script>
</head>
<body>
<div class="main-navigation-container navbar-fixed-top" id="primary-navbar">
<nav class="navbar">
<div class="container-fluid">
<!-- Mobile Toggle Button and stuff -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
Menu <i style="font-size:24px" class="fa fa-arrow-circle-down"></i>
</button>
<a href="#" class="pull-left navbar-brand"><img src="images/Brand.png" class="img-responsive" alt="Peter Scott's Competitive Edge"></a>
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!-- End of mobile toggle button -->
<!-- Start of the navbar -->
<div class="collapse navbar-collapse" id="primary-navigation">
<ul class="nav nav-justified">
<li><a href="index.html"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li>
<li><a href="programs.html"><i style="font-size:24px" class="fa fa-fire"></i> Programs</a></li>
<li><a href="references.html"><i style="font-size:24px" class="fa fa-group"></i> References</a></li>
<li><a href="rates.html"><i style="font-size:24px" class="fa fa-usd"></i> Rates</a></li>
<li><a href="faq.html"><i style="font-size:24px" class="fa fa-question"></i> FAQ</a></li>
<li><a href="contact.html"><i style="font-size:24px" class="fa fa-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<header class="masthead">
<img src="images/Banner.jpg" class="center-block img-responsive" alt="logo">
</header>
<!-- /.container -->
<!-- Feature -->
<div class="container">
<h1>Develop More Effective Leaders With The Leadership Team Challenge</h1>
<img src="images/STEP-UP.gif" class="center-block img-responsive" alt="Step Up">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><a href="#x"><img src="slide/1.jpg" class="img-responsive" alt="teamwork"></a>
</div>
<div class="col-sm-3"><a href="#x"><img src="slide/2.jpg" class="img-responsive" alt="fire eating"></a>
</div>
<div class="col-sm-3"><a href="#x"><img src="slide/3.jpg" class="img-responsive" alt="fire walk"></a>
</div>
<div class="col-sm-3"><a href="#x"><img src="slide/4.jpg" class="img-responsive" alt="trust fall"></a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/5.jpg" class="img-responsive" alt="trust fall 2"></a>
</div>
<div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/6.jpg" class="img-responsive" alt="crew"></a>
</div>
<div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/7.jpg" class="img-responsive" alt="fire eating 2"></a>
</div>
<div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/8.jpg" class="img-responsive" alt="fire eating 3"></a>
</div>
</div>
<!--/row-->
</div>
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i>
</a>
</div>
<!--/myCarousel-->
</div>
</div>
<div class="scroll-top-wrapper ">
\t <span class="scroll-top-inner">
\t \t <i class="fa fa-2x fa-arrow-circle-up"></i>
\t </span>
</div>
<footer>
<!-- Copyright etc -->
<div id="footer">
<p>Copyright © <script>document.write(new Date().getFullYear());</script> Peter Scott's Competitive Edge</p>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="src/jquery.bootstrap-dropdown-hover.js"></script>
<!-- IE10 viewport bug workaround -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script>
//$('[data-toggle="dropdown"]').bootstrapDropdownHover();
$.fn.bootstrapDropdownHover();
//$('#dropdownMenu1').bootstrapDropdownHover();
//$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover();
</script>
<script>
// demo for realtime configuration and destroy
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('#setSticky').on('click', function() {
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'sticky');
});
$('#setDefault').on('click', function() {
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'default');
});
$('#setDisable').on('click', function() {
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'disable');
});
$('#set1000').on('click', function() {
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 1000);
});
$('#set200').on('click', function() {
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 200);
});
$('#destroy').on('click', function() {
$('[data-toggle="tooltip"]').tooltip('hide');
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('destroy');
$('#destroy, #set200, #set1000, #setDisable, #setDefault, #setSticky').prop('disabled', 'disabled');
$('#reinitialize').prop('disabled', false);
$('.setdemo').addClass('destroyed');
});
$('#reinitialize').on('click', function() {
$('[data-toggle="tooltip"]').tooltip('hide');
$('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover();
$('#destroy, #set200, #set1000, #setDisable, #setDefault, #setSticky').prop('disabled', false);
$(this).prop('disabled', 'disabled');
$('.setdemo').removeClass('destroyed');
});
</script>
<script>
$(function(){
\t $(document).on('scroll', function(){
\t \t if ($(window).scrollTop() > 100) {
\t \t \t $('.scroll-top-wrapper').addClass('show');
\t \t } else {
\t \t \t $('.scroll-top-wrapper').removeClass('show');
\t \t }
\t });
});
</script>
<script>
$(function(){
\t $(document).on('scroll', function(){
\t \t if ($(window).scrollTop() > 100) {
\t \t \t $('.scroll-top-wrapper').addClass('show');
\t \t } else {
\t \t \t $('.scroll-top-wrapper').removeClass('show');
\t \t }
\t });
\t $('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
\t verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
\t element = $('body');
\t offset = element.offset();
\t offsetTop = offset.top;
\t $('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
<script>
$(document).ready(function() {
\t $('#myCarousel').carousel({
\t interval: 10000
\t })
$('#myCarousel').on('slid.bs.carousel', function() {
\t //alert("slid");
\t });
});
</script>
</body>
</html>