JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="carousel"></div>

CSS

#carousel {
    background-color: #ccffcc;
    width: 400px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    border: 1px solid #ccc;
}

#carousel div {
    display: inline-block;
}


/* Styling for prev button */

#nav_previous {
    padding: 0 0 0 0;
    position: absolute;
    top: 5;
    left: 5;
    width: 30px;
    height: 30px;
}

#slides {
    overflow: hidden;
    /* fix ie overflow issue */
    position: absolute;
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    top: 5;
    left: 47;
    background-color: #F5F6CE;
}


/* remove the list styles, width : item width=85 * total items=31 */

#slides ul {
    position: relative;
    left: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 2635px;
}


/* width of the item, in this case I put 250x250x gif */

#slides li {
    width: 85px;
    height: 30px;
    float: left;
}


/* Styling for next button */

#nav_next {
    padding: 0 0 0 0;
    position: absolute;
    top: 5;
    left: 364;
    width: 30px;
    height: 30px;
}

#nav_previous a {
    display: block;
    width: 31px;
    height: 32px;
    text-indent: -999em;
    outline: 0;
}

#nav_next a {
    display: block;
    width: 31px;
    height: 32px;
    text-indent: -999em;
    outline: 0;
}

a#prev {
    background: url(http://theimagegroup.net/wp-content/uploads/2014/12/left-arrow.png) no-repeat;
}

a#prev:hover {
    background: url(http://theimagegroup.net/wp-content/uploads/2014/12/left-arrow.png) no-repeat;
}

a#next {
    background: url(http://theimagegroup.net/wp-content/uploads/2014/12/right-arrow.png) no-repeat;
}

a#next:hover {
    background: url(http://theimagegroup.net/wp-content/uploads/2014/12/right-arrow.png) no-repeat;
}

input.btn {
    height: 30px;
    width: 85pm;
    padding-right: 5px;
    padding-left: 5px;
}

.clear {
    clear: both
}

JavaScript

(function($) {

    //create the array of days
    var day_names = new Array("SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT");
    //The number of days in any given month.
    var days_in_month = 0;
    //the day of the month the first day lands on. In reference to the index of day_names array.
    var starting_day = 0;
    //Keep track if div.slides already has been loaded or not.
    var loaded = false;

    $.fn.button_carousel = function(number_of_days, startingday) {
        console.debug("initializing button carousel");
        days_in_month = number_of_days;
        starting_day = startingday;
        //Create initial carousel interface
        var container = $('div#carousel');
        // i'm registering click handler here
        // before the element created
        // it should work, as we use event delegation
        // and placing it inside the plugins definition itselft
        $('div#carousel').on('click', 'a#next', function(event) {
            event.preventDefault();
            console.debug("next click");
        });

        container.append('<div id="nav_previous"><a href="#" id="prev"></a></div><div id="slides"><ul></ul></div><div id="nav_next"><a href="#" id="next"></a></div>');

        //populate unordered list with input type button elements.
        populate_carousel(number_of_days, startingday);
        return this;
    };
	// this should not work unless use document
    // instead of 'div#carousel'
    // or just place it inside the plugins fn
    // to make it work properly
    $('div#carousel').on('click', 'a#prev', function(event) {
        event.preventDefault();
        console.debug("prev click");
    });

    function populate_carousel(number_of_days, startingday) {
        days_in_month = number_of_days;
        starting_day = startingday;
        var index = starting_day;
        //alert("populating");
        if (loaded === false) {
            //first time loading input elements
            var container = $('div#slides...