testimonials box - experiment

A scrolling testimonial box. That's all.

by Maksim

HTML

<script src="http://www.belairtravel.com/includes/webadmin_css_new.asp"></script>
<link rel="stylesheet" href="https://images.thomascookgroup.ca/belairtravel/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://images.thomascookgroup.ca/belairtravel/FontAwesome/css/font-awesome.min.css">
<div id="testimonials">
     <h2>Client Reviews</h2>

    <p>What Customers are Saying</p>
    <div class="container">
        <ul>
            <li>
                <div class="article"> <i class="icon-quote-left"></i>

                    <blockquote>Belairtravel is liek OMG so awesome. I bought a billion things frm them
                        and I WILL buy a billion more to! I Loev these guys soooooooooo muccchhhhhh!</blockquote>
                </div> <cite>
                    <a href="/reviews">Cindy</a>
                </cite>

            </li>
            <li>
                <div class="article"> <i class="icon-quote-left"></i>

                    <blockquote>Melynda thank you for being so helpful. You have great customer service
                        skills and I really liked that you knew the resort and shared your experience.
                        I also have to say it’s nice to get an email thanking me for my business,
                        I really appreciate it. I’m hanging on to your contact for future travel
                        plans!</blockquote>
                </div> <cite>
                    <a href="/reviews">Laurie</a>
                </cite>

            </li>
            <li>
                <div class="article"> <i class="icon-quote-left"></i>

                    <blockquote>Dane , Thank you so much as always for taking care of all our special
                        travel requests. It makes such a difference to one’s holiday. It is the
                        little and big things that you think of and do that keep us coming back
                        to you as our “personal go to travel guy “.</blockquote>
              ...

CSS

/*colours: 
original blue: #36ABE2
new blue: #2db9e0
border: #1785a4
font colors: #115578, #49666e
*/
 #testimonials {
    display:block;
    position:relative;
    margin:10px auto;
    width:256px;
    height:285px;
    padding:15px;
    background:#2db9e0;
    border:1px solid #1785a4;
    color:#49666e;
    font:14px/20px"Gotham Round", Avenir, Arial, Helveitca, sans-serif;
    box-shadow:-2px 3px 1px rgba(0, 0, 0, 0.2);
}
#testimonials .container {
    display:block;
    width:100%;
    height:210px;
    position:relative;
    overflow:hidden;
}
#testimonials ul {
    display:block;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    background:none;
}
#testimonials ul li {
    display:block;
    position:absolute;
    width:206px;
    padding: 35px 25px 15px 25px;
    background:white;
    box-shadow:-1px 2px 1px rgba(0, 0, 0, 0.2);
    margin-bottom:15px;
    overflow:hidden;
    opacity:0;
}
#testimonials i {
    display:block;
    position:absolute!important;
    top:10px;
    left:10px;
    font-size:20px;
    color:#d9d9d9;
}
#testimonials blockquote {
    margin:0 0 5px!important;
    border-left:none!important;
}
h2 {
    color:white;
    font: 28px/32px'Myriad Pro', Arial, Helvetica, sans-serif;
}
h2 + p {
    margin-bottom:10px;
    font-size: 18px;
    font-weight:regular;
    color:#115578;
}
#testimonials cite {
    display:block;
    width:100%;
}
cite a {
    display:block;
    width:100%;
    text-decoration:none;
    color:#2dcff5;
    text-align:right;
}
cite a:focus, cite a:hover {
    text-decoration:underline;
}
cite a:before {
    content:"- ";
}

JavaScript

(function ($) {
    $.fn.testis = function(timer, options) {
        //defaults
        var settings = $.extend({
            'height': 158,
                'width': 205,
            'timer': timer
        }, options);

        return this.each(function () {
            var $this = $(this),
                o = settings;

            adjustSlides($this.find('ul'), {
                'height': o.height,
                    'width': o.width
            });
            var tick = setInterval(function () {
                testimonialSlider(4)
            }, o.timer);

            function testimonialSlider(numberOfSlides) {
                for (var i = 1, j = numberOfSlides; i <= j; i++) {
                    moveSlide($this.find('li[data-slide="' + i + '"]'), {
                        'height': 159
                    });
                }
            }

            function adjustSlides(slider, o) {
                var h = 250,
                    w = 206,
                    m = 20,
                    c = 195;
                var numSlides = getNumSlides(slider)
                //check options
                h = o.height ? o.height : h;
                w = o.width ? o.width : w;
                m = o.m ? o.m : m;
                c = o.c ? o.c : c;
                var slideNum = 0;
                slider.find('li').each(function () {
                    var $this = $(this);
                    var th = $this.outerHeight();
                    var shiftDown = (h + m) * slideNum;
                    $this.css({
                        'height': h + 'px',
                            'width': w + 'px',
                            'top': shiftDown + 'px',
                    });
                    slideNum++;
                    $this.attr('data-slide', slideNum);
                    if (slideNum == 1) $(this).css('opacity', '1');

                    $this.find('blockquote').html(trimArticle($(this).find('blockquote').text(), c));
                })
               ...