"carousel"
Bootstrap 4.1.1 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>CodePen - Review-Carousel-3-col</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style> html, body { height: 100%; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; } #wrap { width: 100%; min-height: 100%; height: auto !important; position: relative; padding: 55px 0; } .review-title { margin-bottom: 30px; } .review-card--option-1 { border: 1px solid #D8D8D8; padding: 25px; } .review-card .review-card-img { border: 1px solid #eee; width: 100px; height: 70px; background-image: url("https://unsplash.it/200"); background-repeat: no-repeat; background-position: center center; margin: 0 auto 15px; } .review-card .review-author .ra-author { font-size: 18px; display: block; margin-bottom: 10px; } .review-card .review-author .ra-rating-star { margin: 0 0 15px; padding: 0; list-style-type: none; } .review-card .review-author .ra-rating-star li { display: inline-block; margin: 0 -2px; } #testiCarousel .carousel-control { background: none; width: auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); bottom: auto; text-shadow: 0 0 0; color: #000; font-size: inherit; } #testiCarousel .carousel-control.left { left: -75px; } #testiCarousel .carousel-control.right { right: -75px; } #testiCarousel .carousel-control i { font-size: 65px; } </style> <script> window.console = window.console || function(t) {}; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div id="wrap"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h3 class="review-title text-center">Testimonials</h3> <div class="row"> <div class="col-lg-12"> <div class="row"> <div class="col-md-12"> <div class="carousel slide hidden-sm hidden-xs" id="testiCarousel" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Oscar Owens</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Virginia Cortez</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Margaret Hayes</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Grace McGuire</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Louisa Moore</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="review-card review-card--option-1 text-center"> <div class="review-card-img"> </div> <div class="review-author"> <span class="ra-author">Helena Baker</span> <ul class="ra-rating-star"> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> <li><i class="material-icons"></i></li> </ul> </div> <div class="review-content"> <p>Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> </div> </div> </div> </div> <a class="left carousel-control" href="#testiCarousel" data-slide="prev"><i class="material-icons"></i></a> <a class="right carousel-control" href="#testiCarousel" data-slide="next"><i class="material-icons"></i></a> </div> </div> </div> </div> </div> </div> </div> <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> <script id="rendered-js"> $('#testiCarousel').carousel({ interval: false }); //# sourceURL=pen.js </script> </body> </html>

Related: See More

Paper Kit 2 PRO Angular
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: