JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="quotes">

        <div class="quotesCont">
          <ul class="qcWrap">
              <li id="tweet-1" class="qcItem">
                <blockquote>lorem 1</blockquote>
              </li> <!-- /qcItem -->
              <li id="tweet-2" class="qcItem">
                <blockquote>lorem 2</blockquote>
              </li> <!-- /qcItem -->
              <li id="tweet-3" class="qcItem">
                <blockquote>lorem 3</blockquote>
              </li> <!-- /qcItem -->
         </ul> <!-- /qcWrap -->
        </div> <!-- /quotesCont -->
        <ul class="quotePagination">
          <li class="active"><a title="" href="#tweet-1">1</a></li>
          <li><a title="" href="#tweet-2">2</a></li>
          <li><a title="" href="#tweet-3">3</a></li>
        </ul> <!-- /quotePagination -->
      </div> <!-- /quotes -->

CSS

#quotes {
    float: right;
    width: 311px;
    padding-bottom: 96px;
    background: url(/assets/promo/base/line-left-quotes.png) 0 0 no-repeat;
}

    #quotes .tagline {
        background: url(/assets/promo/base/corner.png) 2px 0 no-repeat;
        text-align: center;
        padding: 45px 0 0;
    }
    
    #quotes .tagline h3 {
        font-weight: bold;
        font-size: 1.7em;
    }
    
    #quotes .tagline p {
        margin: 10px 0 25px;
    }
    
    #quotes .quotesCont {
        background: #fff;
        width: 258px;
        border: solid 1px #D3D3D3;
        border-bottom: solid 1px #BFBFBF;
        box-shadow: 0 1px 3px #D3D3D3;
        border-radius: 2px;
        overflow: hidden;
        margin-left: 25px;
    }
    
    #quotes .qcWrap {
        width: 1000px;
    }
    
    #quotes .qcItem {
        width: 230px;
        float: left;
        padding: 14px 14px 12px;
        position: relative;
    }
    
        #quotes .qcItem .avatar {
            border: solid 1px #D3D3D3;
            border-bottom: solid 1px #A1A1A1;
            box-shadow: 0 1px 1px #E2E2E2;
            border-radius: 2px;
            padding: 2px;
            position: absolute;
            top: 14px;
            left: 14px;
        }
    
        #quotes .qcItem blockquote {
            min-height: 60px;
            color: #828282;
            font-size: .85em;
            padding-left: 75px;
            font-style: italic;
            line-height: 1.4em;
            border-bottom: solid 1px #E0E0E0;
            padding-bottom: 12px;
            margin-bottom: 10px;
        }
        
        #quotes .qcItem .author {
            background: url(/assets/promo/base/twitter-icon.png) 100% 50% no-repeat;
        }
        
        #quotes .qcItem .author a {
            color: #3C8F27;
            font-size: .85em;
        }
        
    #quotes .quotePagination {
        text-align: center;
        margin-left: 25px;
        position: relative;
        top: -1px;
    ...

JavaScript

var Ticker = new Class({

    Implements: [Options],

    options: {
        interval: 3000
    },

    initialize: function(tickerCont, options) {
        this.setOptions(options);
        this.tickerCont = tickerCont;
        this.currentIndex = 0;
        if (this.tickerCont) {
            this.setup();
        }
    },

    setup: function() {
        this.element = {
            'cont': this.tickerCont.getElement('.quotesCont'),
            'wrap': this.tickerCont.getElement('.qcWrap'),
            'pagination': this.tickerCont.getElements('.quotePagination a')
        };

        this.fx = {
            wrap: new Fx.Tween(this.element.wrap, {
                transition: 'sine:out',
                link: 'cancel'
            })
        };

        this.event = {
            'paginate': {
                click: this.paginate.bind(this)
            }
        };

        if (this.tickerCont) {
            this.attachEvents();
        }
    },

    jump: function() {
        this.element.pagination[this.currentIndex].fireEvent('click', {
            remote: true
        });
    },

    attachEvents: function() {
        this.element.pagination.each(function(element, index) {
            element.addEvents({
                click: function(event) {
                    this.paginate.call(this, event, element, index);
                }.bind(this)
            });
        }, this);

        this.timer = this.jump.periodical(this.options.interval, this);
        this.jump.call(this);

        this.tickerCont.addEvents({
            mouseenter: this.enter.bind(this),
            mouseleave: this.leave.bind(this)
        });
    },

    enter: function() {
        clearInterval(this.timer);
    },

    leave: function() {
        this.timer = this.jump.periodical(this.options.interval, this);
    },

    paginate: function(event, element, index) {
        element.getParent().getSiblings().removeClass('active');
        element.getParent().addClass('active');
       ...