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。 –