This is a bootstrap driven Testimonial Carousel. It is responsivee and lightweight. It is easily styled and can be put in any module position. I based this on the testimonial module from the JSN Dona Template.
Happy Customers
This is just a big thank you to a great company with great products and even better customer service. These guys are really awesome. Using their templates and extensions, my site is loading faster than ever.
I absolutely LOVE JSN Epic PRO. All the functions I will ever need. No glitches, No hassles, No problems, and the best support team I have yet to encounter. Thanks for the only template I will ever need. Can"t praise them enough - Excellent.
I was looking for a suitable template which you can use it for multi languages website, especially it works with right to left language. I tried numerous other Joomla templates, but none were as flexible and efficient as joomlashine templates. Do not hesitate in buying joomlashine templates.
CSS
/*--- Happy Customers ---*/
.happy-customers {
min-width: 200px;
padding: 0px 20px;
}
/* - Title - */
.happy-customers h3 {
font-size: 18px;
line-height: 26px;
text-transform: uppercase;
font-weight: 700;
margin: 30px 0px 30px 0px;
}
/* - Carousel Main Block - */
.happy-customers .hc-testimonial {
-webkit-transition: none !important;
transition: none !important;
}
/* - Carousel Items Wrapper - */
.happy-customers .hc-testimonial .carousel-inner {
padding-bottom: 10px;
}
/* - Carousel Item - */
.happy-customers .hc-item {
text-align: center;
right: auto;
}
/* - Speech Bubble Container - */
.happy-customers .hc-item .hc-box {
position: relative;
background: #FFF;
border: 1px solid #DDD;
padding: 30px 15px 15px;
border-radius: 5px;
min-height: 250px; /* Keeps everything level */
}
/* - Speech Bubble Arrow on the bottom of the bubble - */
.happy-customers .hc-item .hc-box.top > .arrow {
left: 50%;
margin-left: -9px;
border-bottom-width: 0;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
bottom: -10px;
}
.happy-customers .hc-item .hc-box .arrow {
border-width: 9px;
}
.happy-customers .hc-item .hc-box .arrow,
.happy-customers .hc-item .hc-box .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.happy-customers .hc-item .hc-box.top > .arrow:after {
content: " ";
bottom: -7px;
margin-left: -9px;
border-bottom-width: 0;
border-top-color: #FFF;
}
.happy-customers .hc-item .hc-box.top > .arrow:after {
border-width: 9px;
content: "";
}
/* - Speech Bubble Content - */
.happy-customers .hc-item .hc-box .hc-content p {
text-align: center;
font-family: "Raleway";
line-height: 24px;
font-size: 15px;
font-style: italic;
color: #555;
}
/* - Avatar - */
.happy-customers .hc-item .hc-avatar {
width: 60px;
height: 60px;
margin: 30px 15px 0 0;
float: left;
}
.happy-customers .hc-item .hc-avatar img {
display: block;
width: 100%;
}
/* - Meta Information - */
.happy-customers .hc-item .hc-meta {
margin: 30px 0 0;
text-align: left;
padding-right: 40px;
overflow: hidden;
}
.happy-customers .hc-item .hc-meta span {
font-weight: 700;
}
.happy-customers .hc-item .hc-meta span:before {
/*content:'-';*/
padding: 0 4px;
}
.happy-customers .hc-item .hc-meta span:nth-child(2):before {
display: none;
}
.happy-customers .hc-item .hc-meta .hc-name {
margin-bottom: 5px;
font-size: 16px;
color: #333333;
font-weight: bold;
display: block;
}
.happy-customers .hc-item .hc-meta .hc-jobtitle,
.happy-customers .hc-item .hc-meta .hc-country,
.happy-customers .hc-item .hc-meta .hc-link {
display: inline-block;
font-size: 12px;
padding: 0 0;
line-height: 20px;
}
.happy-customers .hc-item .hc-meta .hc-jobtitle,
.happy-customers .hc-item .hc-meta .hc-country {
color: #8A8A8A;
}
/* - Navigation - Indicators */
.happy-customers .hc-testimonial .carousel-indicators {
width: auto;
display: inline-block;
margin: 0;
right: 0;
left: auto;
top: auto !important;
bottom: -20px !important;
}
.happy-customers .hc-testimonial .carousel-indicators li {
background-color: #cbcbcb;
width: 8px;
height: 8px;
border: none;
margin: 0 0 0 5px;
}
.happy-customers .hc-testimonial .carousel-indicators li.active {
background-color: #0088CC;
}
/* - Navigation - Arrows arrows (Not Coded in HTML yet) */
.happy-customers .hc-testimonial .hc-arrow-left,
.happy-customers .hc-testimonial .hc-arrow-right {
border: 1px solid #CCC;
top: auto !important;
bottom: -10px !important;
position: absolute !important;
display: inline-block !important;
margin-top: -19px;
font-size: 15px !important;
color: #AAA !important;
width: 25px !important;
height: 25px;
line-height: 24px;
text-shadow: none !important;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.happy-customers .hc-testimonial .hc-arrow-left {
left: 50% !important;
margin-left: -28px;
margin-bottom: 0;
cursor: pointer;
}
.happy-customers .hc-testimonial .hc-arrow-right {
right: 50% !important;
margin-right: -28px;
cursor: pointer;
}
.happy-customers .hc-testimonial .hc-arrow-left:hover,
.happy-customers .hc-testimonial .hc-arrow-right:hover {
color: #428BCA !important;
border-color: #428BCA;
}
/* - Navigation - Not sure */
.happy-customers .hc-testimonial .carousel-control.left {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
background-repeat: repeat-x;
}
.happy-customers .hc-testimonial .carousel-control.right {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%) !important;
background-repeat: repeat-x;
}
JS Dependancies
JS
(function($){
$(document).ready(function(){
if($("#hc-carousel").length){
/* if you do not have this block when using in joomla it breaks - dont know why */
$('#hc-carousel').each(function(index, element) {
$(this)[index].slide = null;
});
// Activate Carousel
$("#hc-carousel").carousel({
interval: 5000
});
// Enable Carousel Indicators
$("#hc-carousel .carousel-indicators li").each(function(i){
$(this).on("click", function(){
$("#hc-carousel").carousel(i);
});
// Add Enable Arrows here
// ----------------------
});
}
});
})(jQuery);
HTML
<div class="happy-customers"> <h3>Happy Customers</h3> <div class="carousel slide hc-testimonial" style="width:100%" id="hc-carousel"> <div class="carousel-inner"> <div class="item active"> <div class="hc-item"> <div class="hc-box top"> <div class="arrow"></div> <div class="hc-content"> <p>This is just a big thank you to a great company with great products and even better customer service. These guys are really awesome. Using their templates and extensions, my site is loading faster than ever. </p> </div> </div> <div class="hc-avatar"><img src="/images/kb/2016/792/administrator.png" /></div> <div class="hc-meta"> <span class="hc-name">John Doe</span> <span class="hc-jobtitle">System Administrator, </span> <span class="hc-country">United Kingdom</span> <span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span> </div> </div> </div> <div class="item"> <div class="hc-item"> <div class="hc-box top"> <div class="arrow"></div> <div class="hc-content"> <p>I absolutely LOVE JSN Epic PRO. All the functions I will ever need. No glitches, No hassles, No problems, and the best support team I have yet to encounter. Thanks for the only template I will ever need. Can"t praise them enough - Excellent.</p> </div> </div> <div class="hc-avatar"><img src="/images/kb/2016/792/administrator_female.png" /></div> <div class="hc-meta"> <span class="hc-name">Jane Doe</span> <span class="hc-jobtitle">System Administrator, </span> <span class="hc-country">United Kingdom</span> <span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span> </div> </div> </div> <div class="item"> <div class="hc-item"> <div class="hc-box top"> <div class="arrow"></div> <div class="hc-content"> <p>I was looking for a suitable template which you can use it for multi languages website, especially it works with right to left language. I tried numerous other Joomla templates, but none were as flexible and efficient as joomlashine templates. Do not hesitate in buying joomlashine templates.</p> </div> </div> <div class="hc-avatar"><img src="/images/kb/2016/792/salesman.png" /></div> <div class="hc-meta"> <span class="hc-name">James Doe</span> <span class="hc-jobtitle">Programmer, </span> <span class="hc-country">United Kingdom</span> <span class="hc-company"><a href="http://quantumwarp.com/" target="_blank">QuantumWarp</a></span> </div> </div> </div> </div> <ol class="carousel-indicators"> <li class="active"></li> <li></li> <li></li> </ol> </div> </div>