September 3, 2014 | 101 Feedbacks

Client testimonials carousel

Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

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.

The .cd-testimonials-all contains the list (another unordered list) of 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).

Events Handling

To implement the carousel, we used the Flexslider  jQuery plugin by Woothemes:

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

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • http://webentwicklungrostock.de Michael Pehl

    Very nice, I think I am gonna use this very soon :-)

    • http://codyhouse.co/ Sebastiano Guerriero

      Glad you find this useful Michael ;)

  • http://afroniquelyu.com/ afroniquely | shae

    Neat!! Any tips on how best to implement this into WordPress?

  • Tim Welsh

    having a difficult time getting to work in ie seems to work fine in chrome…any suggestions

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Tim, did you upload the Flexslider plugin and jQuery?

      • Tim Welsh

        All of the components that were included with the a.zip download haven been uploaded…thtas what’s odd, the fact that it works in chrome and not ie seems odd…(the.js folder and the Cs’s folder and contents)

        • http://codyhouse.co/ Sebastiano Guerriero

          ie version? Any chance you can upload this on a server and send over the link?

          • Tim Welsh

            its on a secure server, so I wont be able to. I’ll just look at the code behind your working / demo version in ie to see if I’ve missed something…thanks for your help.

  • Reinier Kaper

    A very nice piece of code, but it breaks a little in Chrome (Mac), when you view all the testimonials and size the window down to a mobile view.

    I suspect the height calculations start before the elements are done animating, resulting in wrong values.

    Nice work nonetheless!

    • http://codyhouse.co/ Sebastiano Guerriero

      I’ll look into this bug, thanks for the heads up ;)

  • Josh Boothman

    Very nice. Thank you for sharing.
    How much trouble would it be to implement auto scroll after a certain amount of time?

    • Claudia Romano

      Hi Josh, to animate the slider automatically you need to set, in the .js file,

      instead of

      Hope this helps! :)

      • Josh Boothman

        It does thank you. I can’t believe I missed that!
        Is there a way to change the time interval?

        • Claudia Romano

          You can use the slideshowSpeed parameter. You can find a list of all possible options here: http://www.woothemes.com/flexslider/

          • Josh Boothman

            Wonderful. Got it now :) Thanks for your help.

  • David Whitehead

    This is a really nice plugin :). I personally have done some modifications to the following to ensure that on loading a page with the plugin, it loads more smooth rather then flickering about:-

    js modification:-

    $(“.cd-testimonials-wrapper.cd-container”).hide();
    jQuery(document).ready(function ($) {
    $(“.cd-testimonials-wrapper.cd-container”).fadeIn(400);
    $(“.cd-testimonials-all”).removeAttr(“style”);

    html modification:-

    hope this helps others :)

  • http://lukespoor.me Luke Spoor

    Is it possible to close the view all window when clicking anywhere other than the actual testimonails?

    • http://codyhouse.co Claudia Romano

      Hi Luke,
      try adding this to the main.js file:

      I haven’t tested it but should work.;)

      • http://lukespoor.me Luke Spoor

        Hi, that is breaking my code.

        It says Uncaught SyntaxError: Unexpected token ) on line 86 which corresponds to });

        • http://codyhouse.co Claudia Romano

          I forgot a bracket ;) Updated!

          • http://lukespoor.me Luke Spoor

            Thanks but that isn’t working or at least doing what I’m trying to achieve. When the overlay is visible and I click anywhere but on a testimonial I want it to dissapear

          • http://codyhouse.co Claudia Romano

            Do you have a live version I can check? Thanks!

  • Jaime

    Hi! I’ve included your carousel showcasing in my Prestashop website, I’ve found a problem once the modal window is opened in iOS, especially in iPhone, I can’t see more than 2 comments because when I try to scroll down, this interaction is applied to the background instead of the modal. If you have some idea to fix it, I’ll appreciate a lot! :)

    • http://codyhouse.co Claudia Romano

      Hi Jaime, the carousel works fine in our demo (you can test it on an iPhone). Maybe there’s a conflict with the Prestashop code. Do you have a live version we can check? Thanks!:)

      • Jaime

        Hi Claudia, u can test it at http://www.naranjasgimeno.com/es/navelina/1-comprar-navelina/ Thank you so much!

        • http://codyhouse.co Claudia Romano

          Hi Jaime, try removing the overflow: hidden; property from .cd-testimonials-all.is-visible element.

          • Jaime

            Thank you so much for your reply, but doesn’t work. We’ve removed this, but once the modal is active, the user moves the background page instead of the comments. If you can do scroll the initial product page appears blocked.

          • http://codyhouse.co Claudia Romano

            Hi Jaime, I see it’s not working. Honestly I cannot find any differences compared to our working demo. One thing I noticed, though, is that the .scroll-hidden (-webkit-overflow-scrolling: touch) class is added to the body when the modal is open (maybe a Prestashop class). Try remove this one. Hope this helps!

  • http://codemics.com/ Eric L. Tompkins

    Very nice, good job!

  • akshat oswal

    I am trying to implement this is Squarespace. I am completely new to web dev. Things I need to accomplish are loading the jQuery, Adding custom CSS and the HTML code. Can anyone tell me if all the required code is present above or do I need to load some scripts externally? I cannot install plugins.

  • 01

    Hi!
    I’d thank you for this cool component!
    I’ve two issues, could you help me?
    1). I need to lower a close button, changing the “top” position only changed the shape of “X” button
    2). I’m building the page with parallax effect, but it seems that it doesn’t make sense. The problem is that after I open all testimonials the main web site’s vertical scrollbar remains.
    How it could be fixed? Applying some jQuery in such way?
    [code]$(‘.cd-see-all’).on(‘click’, function(){
    $(‘.cd-testimonials-all’).addClass(‘is-visible’);
    $(‘body’).css(‘overflow’,’hidden’);
    });

    $(‘.cd-testimonials-all .close-btn’).on(‘click’, function(){
    $(‘.cd-testimonials-all’).removeClass(‘is-visible’);
    $(‘body’).css(‘overflow’,’visible’);
    });[/code]

    Thank you!

    • http://codyhouse.co Claudia Romano

      Hi, to change the ‘X’ position you have to change the top of the .close-btn element. And yes you can add an overflow: hidden to the body to make the scroll bar disappear (but you will see a jump of the main content)

  • 01

    Hi!
    Maybe I’m wrong, but IMHO the JS function should be altered with overflow hide and show functions, because opening testimonials on big page, for example with parallax effect renders two vertical scrollbars: one for testimonials and second remains from the main page.
    $(‘.cd-see-all’).on(‘click’, function(){
    $(‘.cd-testimonials-all’).addClass(‘is-visible’);
    $(‘body’).css(‘overflow’,’hidden’);//added this
    });

    $(‘.cd-testimonials-all .close-btn’).on(‘click’, function(){
    $(‘.cd-testimonials-all’).removeClass(‘is-visible’);
    $(‘body’).css(‘overflow’,’visible’);//added this
    });

    Or I’m wrong and everything should work out of the box?

    • http://codyhouse.co Claudia Romano

      Yes you can add an overflow: hidden to the body. The only problem with this solution is that you’ll see a jump of the content because the main scroll bar disappears as soon as you set the overflow property (unless you’re using a trackpad or a magic mouse).

  • mohiddin

    Thanks for this plugin its nice and i have tried this and successfully integrated that in my page everything is working fine. but how to add auto scroll i tried it using Slideshow:true of flex slider but its not working.

    • http://codyhouse.co Claudia Romano

      Hi Mohiddin, glad you like it :)
      In the main.js file, make sure to remove:

      and replace it with:

      That should work!

      • mohiddin

        yes its working thanks Claudia

  • Abu Sayed

    animation: “slide”,
    How many animation ?

  • lenamtl

    Hi, a nice to have will be the use of testimonials ID instead of re-enter tesimonials messages twice:
    one for the slideshow and one for the modal view.

  • Abu Sayed

    How many animation of this plugin ?
    one is slide,
    second ?
    Please tell me second animation name

  • paralellos

    just used it in a school project Thanks!! :)

    • http://codyhouse.co/ Sebastiano Guerriero

      high-five!

  • saju vijayan

    How can i move this automatically please replay

  • Toby

    how can you add a close quote in the bottom right of the box?

    • http://codyhouse.co/ Sebastiano Guerriero

      .close-btn –> replace top: 10px; with bottom: 10px;

      • Toby

        Thanks for the reply but it hasn’t seemed to work.

  • Toby

    I having trouble running the demo on my iPhone. it doesn’t let me scroll up or down. Is there a fix for this?

    • http://codyhouse.co Claudia Romano

      Hi Toby, we just uploaded a new version that fixes the issue!;)

      • Toby

        Thank you very much for this. I managed to fix it but I’m sure this is better.
        Thanks again.

        • Rick Hubbard

          How did you fix the scrolling problem?

          • Toby

            I just modified the jQuery to set the body overflow as hidden and the .close-btn overflow as visible. When closed I reverted these changes back.

            //open the testimonials modal page

            $(‘.cd-see-all’).on(‘click’, function(){

            $(‘.cd-testimonials-all’).addClass(‘is-visible’), $(‘.cd-testimonials-all-wrapper’).css(‘overflow’, ‘scroll’),$(‘body’).css(‘overflow’, ‘hidden’), $(‘.close-btn’).css(‘overflow’, ‘visible’)

            });

            //close the testimonials modal page

            $(‘.cd-testimonials-all .close-btn’).on(‘click’, function(){

            $(‘.cd-testimonials-all’).removeClass(‘is-visible’), $(‘body’).css(‘overflow’, ‘scroll’), $(‘.cd-testimonials-all-wrapper’).css(‘overflow’, ‘hidden’),$(‘body’).css(‘overflow’, ‘scroll’);

            });

  • Matt Milam

    how do i remove the left/right arrows on the side of the quotes? i have set to autorun and do not need them. thanks.

    • Matt Milam

      thanks for the great script

  • Matt Milam

    never mind. as is usually the case as soon as i ask i find the solution.

  • Rick Hubbard

    Hi there. Even with the new script, we are continuing to have scrolling issues on mobile Safari on the iPhone. Any suggestions would be appreciated.

    • http://codyhouse.co Claudia Romano

      Hi Rick, just tested the demo and it’s working properly. Are you still experiencing this issue? Which iOS version are you using? thanks

      • Rick Hubbard

        Thanks for your reply. We are still experiencing the issue on iPhone 6 Plus with iOS 8 and Mobile Safari. Here is the website: http://www.wholeistictouch.com/new/about.html Is there a possibility that other scripts are conflicting? The page scrolls until the carousel moves, then the page locks up from scrolling for a few seconds, then scrolls again until the carousel move again.

        • http://codyhouse.co Claudia Romano

          Hey Rick,
          you have to remove from the css:

          and only leave:

          That should solve your problem!

          • Rick Hubbard

            Hi Claudia,
            After making the changes and testing, it appears that the page scrolling issue is fixed, but the carousel no longer moves or offers arrows for movement on the iPad and iPhone 6. It appears to work on all other devices. Any help would be appreciated as my client uses all Apple products.

  • kiran

    HI this is Kiran Patel ,
    This Is very nice and useful script,
    thanks a lot

  • M G

    hi guys,

    i am using the testimonial script in magneto. but the issue is that page where i am using this testimonial, has a image scroller. Because of testimonial part image scroller is not working. I got to know it is because of jquery conflict. How can i resolve the issue.

    Regards

  • mindburp

    Hey folks, recently discovered you. Solid tight design, awesome color palettes, good stuff! A quick spell check head’s up. 3rd paragraph on this page…”2 plugins have been used to built this resource:”–should be “build.” Kudos again on your work.

    • http://codyhouse.co Claudia Romano

      Fixed! thanks for the heads-up ;)

  • Maria Clara

    Hi! Thank you for this plugin. It’s very useful and user-friendly. But is there any way we can integrate this to a WordPress page?

    • Flash Alexander

      Of course! One would create a custom post type for testimonials where specific data fields would be created to collect targeted data to display as the testimonial. Or use existing posts and create a testimonials category, then pull in the data to the carousel.

  • Maher Almatari

    hi, it works great but when I add it yo my php website the text and the image appears just om second then disappear how to fix this please

  • InfinityPlayer

    I typed the code in instead of simply relying on the downloaded version, which i haven’t downloaded. Thought i’d ‘learn by doing’, as they say. This is a cool idea. I enjoyed typing it in, i just have to add some testimonials. Thanks for putting this up.

  • InfinityPlayer

    What’s all that stuff in the source code for the original page in the ‘cd-nugget-info’ section? I don’t understand the svg stuff, and the polygon stuff.

    • http://codyhouse.co Claudia Romano

      Hi, we use that section to add the ‘back-to-article’ link (the svg is the arrow icon)

  • Toby

    Is there a way to include closing quotes at the bottom right of the existing set?
    I know the code is: content: ‘201d'; but I can’t find out where to place it.

    • http://codyhouse.co Claudia Romano

      Hi Toby, you could use the ::before pseudo-element of the div.cd-testimonial-wrappers and set the quotes as its content. Hope this helps!

      • Toby

        Excellent. That worked perfectly. Thank you.

  • anony

    Very nice script. Thank you very much!
    I Am facing a small Issue. when the 2nd testimonial is loaded, the first one’s trailing is shown at the left side and the 2nd one text is getting a cut-off. check the same on mobile version too.
    http://www.innorious.com/pioneer/
    Would be nice to receive the solution.

    • Jonathan Higley

      Don’t forget to include that reset.css file!

      • anony

        thnaks :)

        • Marek Uhel

          For me resetting all the styles was too drastic approach, so I found out that
          .cd-testimonials-wrapper ul {
          margin:0px;
          padding:0px;
          }
          was enough.

          However, in the “view all” mode, another fix is then needed:
          @media only screen and (min-width: 1170px) {
          .cd-testimonials-all .cd-testimonials-item {
          width: 28%;
          margin: 0 1.6666% 3em;
          }
          }

          Finally, if you don’t like the disc for list items just use:
          li.cd-testimonials-item, .cd-author-info li {
          list-style:none;
          }

  • Just Saying

    is there any way to change the arrow position?
    i want both arrows next to each other in the bottom left corner..
    i’ve succeeded to put both arrow to the bottom, but couldn’t figure out how to move the “next” arrow to the left :|

    • http://codyhouse.co Claudia Romano

      Hi, try changing the right position of the of the .flex-direction-nav li:last-child. That should do it!

  • Ann M.

    What are the .scss files and where do they go? Thank you.

  • Chris

    I’m likely overlooking the obvious somehow, but how can I change the Close Button? Instead of an X I’d like to use an image or the text “BACK”

    • http://codyhouse.co Claudia Romano

      Hi Chris, we create the ‘X’ icon in css (no background-image), but you should try removing the text-replacement from the .close-btn (you can find comments in the style.css file) and hide its ::after and ::before pseudo-elements. That should work!

  • http://deysonortiz.com Deyson

    Hello and good day. Is there a way to tie this into the Woo Testimonial Plugin? I have all my testimonials already in there. Thank you :)

  • Fish Blue

    Hello, is there a way to add wrap on the demo? For example, add a link for the author.

  • http://kabolobari.com Kabolobari Benakole

    Hi, @claudiarrromano:disqus @guerriero_se, kindly check and update the index.html file. It doesn’t contain the slide controls html (). Thanks.

    • http://codyhouse.co Claudia Romano

      Hi there, the slide controls are created by the Flexslider plugin, so no need to insert them in the index.html file. Cheers!

  • http://kabolobari.com Kabolobari Benakole

    Hi, @claudiarrromano:disqus, I’ve just tried the snippets on my site (here, kabolobari.com/uo/) but they won’t work.

    Kindly inspect in case I have some glaring errors. Actually, I’m using flexslider and masonry via cdn and wonder if that may be the issue. It may also help to clarify in a “help” doc which files are absolutely necessary for the code to work like in the demo.

    Thanks for your always appreciated efforts.

    K.

  • canflyblog

    Thanks for the great work. The site I want to use this on used a google font link. By changing the Georgia font in the style.css file the correct font family was used in the testimonial quote, but not the author info, Also, the font on the rest of the page is Georgia. For the life of me, I can’t find any other reference to Georgia. Any suggestions for this newbie? Thank you.

  • canflyblog

    Following the suggestion by Marek Uhel shown below, solved my font issue. But doing away with the reset.css file destroys the masonry effect on the See All page; just displays all in a single column on the left. Please tell me what I need to keep in the reset.css file to re-instate the masonry effect. Thank you.

  • Lauren Ross

    how do i make it a fade instead of slide?

    • Grey Ooi

      animation: “slide”, < change to fade will do

  • http://dribbble.com/aure Auré

    Hi Claudia, thanks for the tutorial. I’m trying to have a full screen container (the grey container “cd-testimonials-wrapper cd-container”) but I fail. Do you have some tip to help ?

  • Grey Ooi

    Hi Sebastiano, great plugin, and thank. However when the page is resized, the items in masonry thingy generated huge white space at the bottom, how to solve this? I tried “bindResize”, “loadItems” but doesn’t work. Please advice, thanks!

    • Grey Ooi

      Thanks for the great plugin Sebastiano, I got it fixed, just need to set the items to full width at the media query will do. Yippie~

  • Simone Ceino

    Hi there i am trying to install this plug in into prestashop 1.6 but is not working