"Responsive Quote Carousel"
Bootstrap 3.0.0 Snippet by pbobinsk

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class='row'> <div class='col-md-12'> <div class="carousel slide" data-ride="carousel" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> <li data-target="#quote-carousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-6 text-center"> <img class="img-circle" src="http://wp-desk.com/lovinflat/images/persons/person_1.png" style="width: 100px;height:100px;"> </div> <div class="col-sm-6"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-6 text-center"> <img class="img-circle" src="http://wp-desk.com/lovinflat/images/persons/person_2.png" style="width: 100px;height:100px;"> </div> <div class="col-sm-6"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-6 text-center"> <img class="img-circle" src="http://wp-desk.com/lovinflat/images/persons/person_3.png" style="width: 100px;height:100px;"> </div> <div class="col-sm-6"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-6 text-center"> <img class="img-circle" src="http://wp-desk.com/lovinflat/images/persons/person_3.png" style="width: 100px;height:100px;"> </div> <div class="col-sm-6"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p> </div> </div> </blockquote> </div> </div> </div> </div> </div> </div>
/* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px 0px 0px; border: solid; border-color: red; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { top: 130px; bottom: auto; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 250px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; margin-top: 30px; } } /* Small devices (tablets, up to 768px) */ @media (max-width: 768px) { /* Make the indicators larger for easier clicking with fingers/thumb on mobile */ #quote-carousel .carousel-indicators { bottom: -20px !important; } #quote-carousel .carousel-indicators li { display: inline-block; margin: 0px 5px; width: 15px; height: 15px; } #quote-carousel .carousel-indicators li.active { margin: 0px 5px; width: 20px; height: 20px; } }
// When the DOM is ready, run this function $(document).ready(function() { //Set the carousel options $('#quote-carousel').carousel({ pause: true, interval: 4000, }); });

Related: See More


Questions / Comments: