0
所以我想實現這個旋轉木馬的個人鑑定：http://bootsnipp.com/snippets/featured/testimonials-with-carousel引導 - 褒獎旋轉木馬問題
到目前爲止，這是什麼事，我不知道爲什麼它的發生...... 
/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
*/
/* Global Styles
============================================================ */
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #fff;
background-color: #fff;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5 {
font-family: 'Oswald', 'Open Sans', sans-serif;
color: #000;
}
p {
font-family: 'Open Sans', sans-serif;
color: #000;
}
/* Navbar Style
============================================================ */
@media(min-width:767px) {
.navbar {
padding: 20px 0;
background-color: #fff;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.navbar-default {
background-color: #fff;
}
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
/* Jumbotrons
=======================================================*/
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 1;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 400px;
background-color:#555;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
/* Section Formatting
======================================================== */
/* Special Offers Boxes Formatting
================================== */
.shape {
border-style: solid;
border-width: 0 70px 40px 0;
float: right;
height: 0px;
width: 0px;
-ms-transform: rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
transform: rotate(360deg);
}
.listing {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
margin: 15px 0;
overflow: hidden;
}
.listing:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: rotate scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.shape {
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.listing-radius {
border-radius: 7px;
}
.listing-danger {
border-color: #d9534f;
}
.listing-danger .shape {
border-color: transparent #d9533f transparent transparent;
}
.listing-success {
border-color: #5cb85c;
}
.listing-success .shape {
border-color: transparent #5cb75c transparent transparent;
}
.listing-default {
border-color: #999999;
}
.listing-default .shape {
border-color: transparent #999999 transparent transparent;
}
.listing-primary {
border-color: #428bca;
}
.listing-primary .shape {
border-color: transparent #318bca transparent transparent;
}
.listing-info {
border-color: #5bc0de;
}
.listing-info .shape {
border-color: transparent #5bc0de transparent transparent;
}
.listing-warning {
border-color: #f0ad4e;
}
.listing-warning .shape {
border-color: transparent #f0ad4e transparent transparent;
}
.shape-text {
color: #fff;
font-size: 12px;
font-weight: bold;
position: relative;
right: -40px;
top: 2px;
white-space: nowrap;
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
transform: rotate(30deg);
}
.listing-content {
padding: 0 20px 10px;
}
/* Testinials Formatting
=============================================================*/
.carousel-indicators .active {
background:#31708f
}
.content {
margin-top:20px
}
.adjust1 {
float:left;
width:100%;
margin-bottom:0
}
.adjust2 {
margin:0
}
.carousel-indicators li {
border:1px solid #ccc
}
.carousel-control {
color:#31708f;
width:5%
}
.carousel-control:hover,.carousel-control:focus {
color:#31708f
}
.carousel-control.left,.carousel-control.right {
background-image:none
}
.media-object {
margin:auto;
margin-top:15%
}
@media screen and (max-width: 768px) {
.media-object {
margin-top:0
}
}
/* Contact Formatting
=============================================================*/
/* Button Formatting
=============================================================*/
/* Footer Formatting
==============================================================*/
#footer {
\t background: #222;
\t text-align: center;
\t padding: 40px 0;
\t color: #fff;
}
.copyright {
\t margin: 0;
}
.copyright a{
border-bottom: 1px dotted #fff;
}
#footer span{
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
color: #ff5252;
}
#footer p {
color: #fff
}
.social-links {
\t list-style: none;
\t padding: 0;
\t margin: 0 0 20px;
}
.social-links li {
\t display: inline-block;
\t margin: 5px;
}
.social-links a {
\t width: 36px;
\t height: 36px;
\t display: block;
\t line-height: 35px;
\t text-align: center;
\t border: 1px solid rgba(255, 255, 255, .1);
\t -webkit-border-radius: 3px;
\t -moz-border-radius: 3px;
\t \t \t border-radius: 3px;
\t font-size: 14px;
\t color: rgba(255, 255, 255, .2);
}
.social-links a:hover {
\t border: 1px solid rgba(255, 255, 255, .5);
\t color: rgba(255, 255, 255, .8);
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta charset
===================================================================================-->
<meta charset="utf-8">
<!-- Title
===================================================================================-->
<title>Window Company Template</title>
<!-- Meta Tags
===================================================================================-->
<meta name="author" content="Thomas Withers @ tomtucka.co.uk">
<meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- CSS Stylesheets
===================================================================================-->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/Custom.css" rel = "stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="shortcut icon" href="img/iceBox.png">
<!-- Custom Fonts
===================================================================================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
======================================================================================= -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden"><a class="page-scroll" href="#page-top"></a>
<li><a class="page-scroll" href="#About-Us">About</a> </li>
<li> <a class="page-scroll" href="#services">Services</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron
===================================================================================-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="/assets/example/bg_suburb.jpg" style="width:100%" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Ice7Media</h1>
<p>This is a tag line.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Button!</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/2000/600/abstract/1" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Ice7Media</h1>
<p>This is a tag line.</p>
<p><a class="btn btn-large btn-primary" href="#">Button!</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1500X500" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Ice7Media</h1>
<p>This is a tag line.</p>
<p><a class="btn btn-large btn-primary" href="#">Button!</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- Abouts Us
==================================================================================-->
<section id="About-Us" class="About-Us">
<div class="container">
<div class="row">
<div class="col-lg-6 vline">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
</div>
<div class="col-lg-6">
<div class="listing listing-danger">
<div class="shape">
<div class="shape-text">50%</div>
</div>
<div class="listing-content">
<h3 class="lead">Discount listing</h3>
<p>Tag Line.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="listing listing-danger">
<div class="shape">
<div class="shape-text">hot</div>
</div>
<div class="listing-content">
<h3 class="lead">Hot Offer</h3>
<p>Tag Line.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimoinals
==================================================================================-->
<div class="container content">
<div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target=
"#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic">
</li>
<li data-slide-to="2" data-target="#carousel-example-generic">
</li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail adjust1">
<div class="col-md-2 col-sm-2 col-xs-12">
<img class=
"media-object img-rounded img-responsive" src=
"http://placehold.it/100"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="caption">
<p class="text-info lead adjust2">I
can't wait to test this out.</p>
<p><span class=
"glyphicon glyphicon-thumbs-up"></span> This
is a testimonial window. Feedback of
user can be displayed here.</p>
<blockquote class="adjust2">
<p>Abhijit
Goswami</p><small><cite title=
"Source Title"><i class=
"glyphicon glyphicon-globe"></i>
www.example1.com</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail adjust1">
<div class="col-md-2 col-sm-2 col-xs-12">
<img class=
"media-object img-rounded img-responsive" src=
"http://placehold.it/100"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="caption">
<p class="text-info lead adjust2">I
can't wait to test this out.</p>
<p><span class=
"glyphicon glyphicon-thumbs-up"></span> This
is a testimonial window. Feedback of
user can be displayed here.</p>
<blockquote class="adjust2">
<p>Abhijit
Goswami</p><small><cite title=
"Source Title"><i class=
"glyphicon glyphicon-globe"></i>
www.example2.com</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail adjust1">
<div class="col-md-2 col-sm-2 col-xs-12">
<img class=
"media-object img-rounded img-responsive" src=
"http://placehold.it/100"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="caption">
<p class="text-info lead adjust2">I
can't wait to test this out.</p>
<p><span class=
"glyphicon glyphicon-thumbs-up"></span> This
is a testimonial window. Feedback of
user can be displayed here.</p>
<blockquote class="adjust2">
<p>Abhijit
Goswami</p><small><cite title=
"Source Title"><i class=
"glyphicon glyphicon-globe"></i>
www.example3.com</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Controls --><a class="left carousel-control" data-slide=
"prev" href="#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-left"></span></a> <a class=
"right carousel-control" data-slide="next" href=
"#carousel-example-generic"><span class=
"glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<!-- Map
==================================================================================-->
<!-- footer
==================================================================================-->
\t <footer id="footer">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-sm-12">
\t \t \t \t \t <ul class="social-links">
\t \t \t \t \t \t <li><a href="index.html#" ><i class="fa fa-facebook"></i></a></li>
\t \t \t \t \t \t <li><a href="index.html#" ><i class="fa fa-twitter"></i></a></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <p class="heart">
This is a Tag line.
</p>
<p class="footer-company-name">Ice7Media © 2015</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </footer>
<!-- Scripts
===================================================================================-->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>有人能幫助我解決這個> 任何幫助表示讚賞
剛剛從網站複製https://jsfiddle.net/zlen/Lbjnp6bs/有什麼問題？ – Zl3n
你究竟想知道什麼？該網站模板工作正常：https://jsfiddle.net/Shaz4584/j48cngbh/embedded/result/ – SHAZ
你有兩個滑塊在頁面中，與相同的類'旋轉木馬幻燈片'。小心你的自定義CSS。 –