"Mali Natural Products • Product Review Carousel"
Bootstrap 3.3.0 Snippet by MaliNaturalProducts

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> </head> <div class="container"> <div class="row"> <div class="col-md-12" data-wow-delay="0.2s"> <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"><img class="img-responsive " src="http://k003.kiwi6.com/hotlink/t3h7xdwraj/Testimonial_Image_4.png" alt=""> </li> <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="http://k003.kiwi6.com/hotlink/95o7miwrbk/Testimonial_Image_5.png" alt=""> </li> <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="http://k003.kiwi6.com/hotlink/qkkwf9eftj/Testimonial_Image_6.png" alt=""> </li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner text-center"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>Ok so I had this really really bad bump on my face and I popped it(I KNOW! NOT GOOD!) The next day I had this scar on my cheek that I just couldn't get rid of for about a week. . :( So my friend offered some of her awesome Breath of Mali - Coco Mango/Dark Blend just for me to try it? OMG! I used it after washing my face and it made my skin feeling sooo good! PLUS after using it for about 2-3 days(I need to get my friend more!</p> <small>Yejide Jones • 8.29.2016 • Albany . New York</small> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>This butter is really great! I choose my skintone on there websites melanin graph and it took me right to what product was best for me. I gave it a try and my skin has been great! There customer service is very good by the way</p> <small>Marie Murrietta • 8.13.2016 • Pheonix . Arizona</small> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>Its silky. Its smells fab. Its filled with organic, non gmo herbs, vitamins & minerals. Its great for my skin AND hair! Love it ♥ </p> <small>Margarita Stearns • 8.15.2016 • Los Angelos . California</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> <hr class="divider"/> <center> <strong>Powered by <a href="http://www.malinaturalproducts.com/" target="_blank">Mali Natural Products</a></strong> </center>
/* Carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; /* Control buttons */ /* Previous button */ /* Next button */ /* Changes the position of the indicators */ /* Changes the color of the indicators */ } #quote-carousel .carousel-control { background: none; color: #009999; font-size: 2.3em; text-shadow: none; margin-top: 30px; } #quote-carousel .carousel-control.left { left: -60px; } #quote-carousel .carousel-control.right { right: -60px; } #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } #quote-carousel .carousel-indicators li { width: 50px; height: 50px; margin: 5px; cursor: pointer; border: 4px solid #CCC; border-radius: 50px; opacity: 0.4; overflow: hidden; transition: all 0.3s; } #quote-carousel .carousel-indicators .active { background: #00334d; width: 128px; height: 128px; border-radius: 100px; border-color: #f33; opacity: 1; overflow: hidden; } .carousel-inner { min-height: 300px; } .item blockquote { border-left: none; margin: 0; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; }

Related: See More


Questions / Comments: