Testimonial Carousel

HTML

<center>
<section id="testimonials">
<div class="cust-quotes">
  <blockquote data-timeout="9800"><p>Show was fantastic and wonderful! I loved the music and lights! So different from other Christmas 'Shows'</p><cite>- Beverly Dzienn</cite></blockquote>

  <blockquote data-timeout="9800"><p>Wow! That was great! The choice of music was super too. Thanks for doing this.</p><cite>- Mary </cite></blockquote>

  <blockquote data-timeout="9800"><p>We visited two days ago and it was a BLAST! Thank you for the wonderful show and great fun at Santa's Village.</p><cite>—Rogers Reyna </cite></blockquote>

  <blockquote data-timeout="9800"><p>Lights were great and song selection was outstanding! We are telling all our friends about it.</p><cite>—Scott Hermel </cite></blockquote>

  <blockquote data-timeout="9800"><p>My wife and I have gone three times and really enjoy it. We have taken friends and family, and it never fails!</p><cite>—Ronn Grace </cite></blockquote>
  
  <blockquote data-timeout="9800"><p>I wish everyone could see this at least once. Amazing!</p><cite>—Hazel Rector Nash </cite></blockquote>
  
  <blockquote data-timeout="9800"><p>Took my 4 year old daughter. Just to hear her reaction was priceless. Brought tears to my eyes.</p><cite>—Amanda Williamson </cite></blockquote>


  </div>
  </section>
  </center>

CSS

//  Custom Quote Carousel  //
.cust-quotes {
//  width: 640px;
    height: 150px;
//  position:relative;\
}


.cust-quotes blockquote {
  position: absolute;
//  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 26px;
  line-height: 1.1em;
  text-align: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-out 0s, transform 0.5s ease-in 0s;
}

/* IE < 10 fallback */
.no-csstransitions .cust-quotes blockquote,
.no-csstransforms .cust-quotes blockquote {
   position:relative;
}

.cust-quotes blockquote:first-child {
    opacity: 0;
    transform: translateY(-10px) scale(1.1);
}
.cust-quotes blockquote:first-child + blockquote {
    opacity: 1;
    z-index: 1;
    transition: opacity 1.6s ease 0s;
}
.cust-quotes blockquote p{
  font-size: 28px;
//  font-weight:normal;
  font-style:italic;
  color: @red;
//  line-height: 30px;
//  margin-bottom: 10px;
}
.cust-quotes blockquote p:before {
   content: '\201C';
}
.cust-quotes blockquote p:after {
   content: '\201D';
}
.cust-quotes blockquote cite {
    text-align: center;
    font-size: 20px;
    color: green;
}
.cust-quotes blockquote cite a {
  font-size: 14px;
  font-weight:normal;
}

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
function initQuoteCarousel() {

    var $quotesWrapper = $(".cust-quotes");
    var $quotes = $quotesWrapper.find("blockquote");

    if (!$quotes.length) {
        return;
    }

    var selectNextQuote = function () {
        // keep move first quote in dom to the end to make continous
        var $quote = $quotesWrapper.find("blockquote:first").detach().appendTo($quotesWrapper);

        setTimeout(selectNextQuote, $quote.data("timeout"));
    };

    setTimeout(selectNextQuote, $quotes.filter(":first").data("timeout"));

}

$(function () {
    initQuoteCarousel();
});
</script>