JSFiddle - React, Tailwind, and code Playground

Tweet Slider

by Jennifer Perrin

HTML

<div class="infobox">
            <div id="tweets"></div>
        </div>

CSS

.infobox{
    height: 100px;
    position: absolute;
    right: 0;
    top: 0;
    width: 460px;
    border:0px solid #dddddd;
}
.tweet_slider {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: relative;
}
.tweet_slider h4 {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-align: left;
}
.tweet_slider ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
}
.tweet_slider ul li {
    float: left;
    left: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 40px;
    position: relative;
    line-height:22px;
    font-size:14px;
    width:450px;
}
a.nextButton {
    display: none;
}
.controls {
    height: 24px;
    line-height: 24px;
}
a.prevButton {
    display: none;
}
.tweet_slider ul li div, .tweet_slider ul li div span {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-align: left;
    width: auto;
}
.tweet_slider ul li img {
    padding-right: 10px;
    margin-left:10px;
}
#tweets ul li {color:#404040;font-family: 'MuliRegular',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;}
#tweets ul li a{color:#3399ff;text-decoration:none;}
#tweets ul li a:hover {border-bottom:1px dotted #dddddd;text-decoration:none;color:#ec008c;}

JavaScript

(function($) {
    var defaults = {
        username: 'jenniferdperrin',
        slides: 5,
        baseURL: 'https://api.twitter.com/1/statuses/user_timeline.json',
        width: 450,
        speed: 'fast',
        refreshTime: 200000
    };
    var storage = {
        store: {},
        init: function(element) {
            storage.element = element;
            if (!storage.element.hasClass('tweet_slider')) {
                storage.element.addClass('tweet_slider')
            }
            storage.element.data('currslide', new Number(1));
            storage.tweets_container = $('<ul></ul>');
            storage.tweets_container.appendTo(storage.element);
        },
        grab_tweets: function(options) {
            $.getJSON(options.baseURL + "?callback=?", "&screen_name=" + options.username + "&count=" + options.slides, function(data) {
                storage.store.tweets = data;
                storage.build_display();
                storage.addButtons(1);
                storage.element.css('width', options.width + 'px');
                storage.csswidth = data.length * options.width;
                storage.twidth = storage.csswidth - options.width;
                storage.tweets_container.css('width', storage.csswidth + 'px');
            });
            setTimeout(storage.refresh, options.refreshTime);
        },
        build_display: function() {
            if (typeof(storage.slides) != "undefined" && storage.slides.length > 0) {
                storage.tweets_container.html('').fadeIn('fast');
            }
            var tweets = storage.store.tweets;
            var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
            for (i in tweets) {
                var tweet_html = $('<li></li>');
                tweet_html.css('width', options.width + 'px').append('<div><img align="left" src="' + tweets[i].user.profile_image_url + '" />');
                tweet_html.append('<span><a...