Bootstrap - Testimonials轮播问题
所以我正在尝试实施这个推荐书轮播：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 {
background: #222;
text-align: center;
padding: 40px 0;
color: #fff;
}
.copyright {
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 {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.social-links li {
display: inline-block;
margin: 5px;
}
.social-links a {
width: 36px;
height: 36px;
display: block;
line-height: 35px;
text-align: center;
border: 1px solid rgba(255, 255, 255, .1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
color: rgba(255, 255, 255, .2);
}
.social-links a:hover {
border: 1px solid rgba(255, 255, 255, .5);
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
==================================================================================-->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><a href="index.html#" ><i class="fa fa-facebook"></i></a></li>
<li><a href="index.html#" ><i class="fa fa-twitter"></i></a></li>
</ul>
<p class="heart">
This is a Tag line.
</p>
<p class="footer-company-name">Ice7Media © 2015</p>
</div>
</div>
</div>
</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>
有人可以帮我解决这个问题＆gt; 任何帮助表示赞赏
2 个答案:
答案 0 :(得分：1)
就像我在评论中所说，你有两个滑块。对于第二个滑块，添加一个类（并更改id），然后您可以为其元素添加一些属性：
<div class="carousel carousel2">
</div>
.carousel2{
width:100%;
}
.carousel2 .thumbnail{
border:0;
}
.carousel.carousel2 img {
min-height: 100px;
}
.carousel.carousel2 .item {
height: auto;
}
http://jsfiddle.net/6tbe9e3g/3/
我认为这就是您所需要的，如果您需要自定义一些细节，可以更新样式。
答案 1 :(得分：0)
创造了一个小提琴
https://jsfiddle.net/jrahulroy/a6kk3k9d/
工作正常。似乎其他一些css正在干扰。
.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;
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？