I am attempting to create a carousel using Bootstrap Panels such as these:
With arrows on the side to move the panel by one(left or right). I've created the carousel, however I'm not sure how to create individual panels such as the ones above. The panels take up the whole row as seen below:
My HTML:
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Testimonials</h2>
</div>
<div class="col-lg-12">
<div id="tcb-testimonial-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#tcb-testimonial-carousel" data-slide-to="0" class="active"></li>
<li data-target="#tcb-testimonial-carousel" data-slide-to="1"></li>
<li data-target="#tcb-testimonial-carousel" data-slide-to="2"></li>
<li data-target="#tcb-testimonial-carousel" data-slide-to="3"></li>
<li data-target="#tcb-testimonial-carousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<figure class="clearfix">
<div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="http://placehold.it/100x100"> </div>
<div class="col-md-10 col-sm-10 col-xs-12">
<figcaption class="caption">
<p class="text-brand lead no-margin">Title</p>
<p>text goes here</p>
<blockquote class="no-margin">
<p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
</figcaption>
</div>
</figure>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<figure class="clearfix">
<div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="http://placehold.it/100x100"> </div>
<div class="col-md-10 col-sm-10 col-xs-12">
<figcaption class="caption">
<p class="text-brand lead no-margin">Title</p>
<p>Text goes here</p>
<blockquote class="no-margin">
<p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
</figcaption>
</div>
</figure>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<figure class="clearfix">
<div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="http://placehold.it/100x100"> </div>
<div class="col-md-10 col-sm-10 col-xs-12">
<figcaption class="caption">
<p class="text-brand lead no-margin">Title</p>
<p>text goes here</p>
<blockquote class="no-margin">
<p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
</figcaption>
</div>
</figure>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<figure class="clearfix">
<div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="http://placehold.it/100x100"> </div>
<div class="col-md-10 col-sm-10 col-xs-12">
<figcaption class="caption">
<p class="text-brand lead no-margin">Title</p>
<p>text goes here</p>
<blockquote class="no-margin">
<p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
</figcaption>
</div>
</figure>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#tcb-testimonial-carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
<a class="right carousel-control" href="#tcb-testimonial-carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
</div>
My CSS:
#tcb-testimonial-carousel {
margin-top: 30px;
}
#tcb-testimonial-carousel a {
color: #000000;
}
#tcb-testimonial-carousel .text-brand {
color: #000000;
}
#tcb-testimonial-carousel .carousel-indicators .active {
background: #215B7A;
}
#tcb-testimonial-carousel .no-margin {
margin: 0;
}
#tcb-testimonial-carousel .carousel-indicators li {
border: 1px solid #ccc;
}
#tcb-testimonial-carousel .carousel-control {
color: #215B7A;
width: 5%;
}
#tcb-testimonial-carousel .carousel-control:hover,
#tcb-testimonial-carousel .carousel-control:focus {
color: #215B7A;
}
#tcb-testimonial-carousel .carousel-control.left,
#tcb-testimonial-carousel .carousel-control.right {
background-image: none;
}
#tcb-testimonial-carousel .item {
padding: 15px 40px;
background: #FFFFFF;
}
#tcb-testimonial-carousel .media-object {
margin: auto;
}
@media screen and (max-width: 768px) {
#tcb-testimonial-carousel .media-object {
margin-bottom: 15px;
}
}
What am I doing wrong?
Aucun commentaire:
Enregistrer un commentaire