"Fade :Responsive Quote Carousel"
Bootstrap 3.1.0 Snippet by tatamize

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!-- Head tags to include FontAwesome --> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class='col-md-offset-2 col-md-8 text-center'> <h2>Responsive Quote Carousel BS3</h2> </div> </div> <div class='row'> <div class='col-md-offset-2 col-md-8'> <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> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner" data-pause="false"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-3 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-9"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 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-9"> <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> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 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-9"> <p>testtestetetetetetetecommodo tortor, eu pretium mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> </div> <!-- Carousel Buttons Next/Prev --> <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div> </div> </div> </div>
/* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px 0px 0px; } /* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; font-size: 2.3em; text-shadow: none; margin-top: 30px; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; -webkit-transition: background 2s; /*adjust timing here */ -moz-transition: background 2s; -o-transition: background 2s; transition: background 2s; } #quote-carousel .carousel-indicators .active { background: #333333; -webkit-transition: background 2s; /*adjust timing here */ -moz-transition: background 2s; -o-transition: background 2s; transition: background 2s; } #quote-carousel img { width: 250px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 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; } } /* Fade transition for carousel items */ .carousel .item { left: 0 !important; opacity: 0; -webkit-transition: opacity 2s; /*adjust timing here */ -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; } .carousel-control { background-image: none !important; /* remove background gradients on controls */ } /* Fade controls with items */ .item.active{ opacity: 1; } .next.left, .prev.right { opacity: 1; z-index: 10; } .active.left, .active.right { opacity: 0 !important; z-index: 2; -webkit-transition: opacity 2s; /*adjust timing here */ -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; }
// When the DOM is ready, run this function $(document).ready(function() { //Set the carousel options $('#quote-carousel').carousel({ pause:'hover', interval: 6000, }); });

Related: See More

Now UI Dashboard React
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 Carousel

Questions / Comments: