Client Testimonials Carousel

The testimonials carousel is a strategic section of a website. It's a marketing tool, whose message is "this product/service has been used, and it's good. Trust us!".

Today we share a responsive and minimal client testimonials box, that can be easily integrated into your design. Besides we considered the scenario where the user wants to see more feedbacks, so we added a button that links to a modal page with more testimonials, with a nice CSS3 transition.

2 plugins have been used to build this resource: FlexSlider for the carousel, and Masonry layout to build the grid for the testimonials modal page.

Creating the structure

We used the .cd-testimonials-wrapper to wrap the carousel structure. The slider is just an unordered list, plus we added an anchor tag (.cd-see-all) as the button that links to the modal page with all testimonials.

Adding style

The CSS is pretty straightforward, nothing fancy here. Just couple of highlights worth mentioning: all the icons have been created with CSS only. The 2 arrows of the carousel, for example, are composed by 2 rotated pseudo-elements (::before and ::after). Here is the code (note that you won't see the .flex-direction-nav div into the HTML structure, since it's created by the FlexSlider plugin):

The .cd-testimonials-all (container of the testimonials list) is hidden by default using the Visibility property. When possible (mostly with absolute and fixed positioned elements, which don't interfere with the flow of the other elements of the page), I prefer to use the visibility property over the display one. The reason being that you can apply a transition to the Visibility property, while you can't to the Display one. To create a fade-in effect, you just need to apply a transition to the Opacity property too. The trick, though, is to add a delay to the Visibity transition (BUT only when the .is-visible class is removed, therefore you need to remove that delay from the .is-visible class).

To make this passage more simple: when you apply the class .is-visible, the Visibility has no delay (the transition in use is the one of the class). The element has to be visible immediately, then the opacity can smoothly switch from 0 to 1). When you remove the class, the transition in use is the one applied to the .cd-testiminials-all div. In this case the Visibility value has to switch from Visible to Hidden AFTER the duration of the opacity transition. Otherwise the element would just turn NOT visible, with no fade-out effect (no time for the opacity transition to happen).