CSS and jQuery Client testimonials carousel. The carousel is a strategic part of the testimony of a website. This is a marketing tool, its message is “This product / service has been used, which is good. Please believe us!.”

Today we share a responsible and minimal customer testimonials can be easily integrated into your design. In addition, we believe that users want to see the situation under more feedback, so we added a button link to more testimonials page mode, with a beautiful CSS3 transitions.

<div class=”cd-testimonials-wrapper cd-container”>
<ul class=”cd-testimonials”>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class=”cd-author”>
<img src=”img/avatar-1.jpg” alt=”Author image”>
<ul class=”cd-author-info”>
<li>MyName</li>
<li>CEO, AmberCreative</li>
</ul>
</div>
</li>

<li><!– … –></li>

<li><!– … –></li>
</ul> <!– cd-testimonials –>

<a href=”#0″ class=”cd-see-all”>See all</a>
</div> <!– cd-testimonials-wrapper –>

 

 

2 plug-in has been used to build this resource: merry FlexSlider of and masonry layout, build grid witness modal page.

Creating structure

We use .CD- testimony, packaging to wrap turntable structure. Slider simply an unordered list, plus we added an anchor tag (.CD- see -ALL), as a link button all the testimony modal page.

The .CD- testimony contains all the recommended list (another unordered list).

<div class=”cd-testimonials-all”>
<div class=”cd-testimonials-all-wrapper”>
<ul>
<li class=”cd-testimonials-item”>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p>

<div class=”cd-author”>
<img src=”img/avatar-1.jpg” alt=”Author image”>
<ul class=”cd-author-info”>
<li>MyName</li>
<li>CEO, CompanyName</li>
</ul>
</div> <!– cd-author –>
</li>

<li class=”cd-testimonials-item”><!– … –></li>
</ul>
</div> <!– cd-testimonials-all-wrapper –>

<a href=”#0″ class=”close-btn”>Close</a>
</div> <!– cd-testimonials-all –>

 

Adding Style

CSS is very simple, nothing fancy here. Just a few highlights worth mentioning: all icons have been created, only CSS. 2 arrow belt, for example, the composition of the two rotating pseudo-elements (:: :: before and after). Here is the code (Please note that you will not see .flex direction, navigate to the HTML DIV structure, as it is created by FlexSlider plugin):

 

.flex-direction-nav li {
position: absolute;
height: 100%;
width: 40px;
top: 0;
}

.flex-direction-nav li:first-child {
left: 0;
}

.flex-direction-nav li:last-child {
right: 0;
}

.flex-direction-nav li a {
display: block;
height: 100%;
width: 100%;

/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

transition: background-color 0.2s;
}

.flex-direction-nav li a::before, .flex-direction-nav li a::after {
/* left and right arrows in css only */
content: ”;
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 13px;
background-color: white;
}

.flex-direction-nav li a::before {
transform: translateY(-35px) rotate(45deg);
}

.flex-direction-nav li a::after {
transform: translateY(-27px) rotate(-45deg);
}

.flex-direction-nav li:last-child a::before {
transform: translateY(-35px) rotate(-45deg);
}

.flex-direction-nav li:last-child a::after {
transform: translateY(-27px) rotate(45deg);
}

carasoul-css-jquerya

The .CD- testimony, all (of containers witness list), used by default Visibility property is hidden. Where possible (mostly absolute and fixed positioning of elements has, it does not flow interference with other elements of the page), I prefer to use the Visible property of one of the displays. The reason is that you can apply for a transition to a Visibility property, but you can not be displayed. To create a fade-in effect, you just need to apply for a change Opacity property. This move, however, was to delay added to Visibity conversion (but only when. Is visible class is deleted, so you need to remove. Is visible class, it’s a delay).

In order to make this passage easier: When you use the class. It is visible, visibility without delay (a transition class use). The element has immediately visible, then the opacity can be switched smoothly from 0-1). When you delete a category, the use of transition apply to all one DIV .CD-testiminials-. In this case, the visibility values ​​have after switching from the visible to the duration of the opacity of the hidden switch. Otherwise, the element will only invisible, no fade-out effect (no time opacity transition to occur).

 

.cd-testimonials-all {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: white;
z-index: 2;

visibility: hidden;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-testimonials-all.is-visible {
visibility: visible;
opacity: 1;
transition: opacity .3s 0s, visibility 0s 0s;
}

 

Event Processing

To achieve the carousel, we use the WooThemes Flexslider jQuery plugin:

 

$(‘.cd-testimonials-wrapper’).flexslider({
//declare the slider items
selector: “.cd-testimonials > li”,
animation: “slide”,
//do not add navigation for paging control of each slide
controlNav: false,
slideshow: false,
//Allow height of the slider to animate smoothly in horizontal mode
smoothHeight: true,
start: function(){
$(‘.cd-testimonials’).children(‘li’).css({
‘opacity’: 1,
‘position’: ‘relative’
});
}
});

 

For the testimonials modal page, we used the Masonry library:

$(‘.cd-testimonials-all-wrapper’).children(‘ul’).masonry({
itemSelector: ‘.cd-testimonials-item’
});

 

Download: CSS and jQuery Client testimonials carousel