JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="container">
    <div class="carousel-feature clearfix">
            <div class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        1111
                    </div>
                    <div class="item">
                        2222
                    </div>
                    <div class="item">
                        3333
                    </div>
                    <div class="item">
                        4444
                    </div>
                    <div class="item">
                        5555
                    </div>
                </div>
            </div>

            <ul class="thumbs-nav carousel-nav">
                <li class="active item">
                    <a href="#">one</a>
                </li>
                <li class="item">
                    <a href="#">two</a>
                </li>
                <li class="item">
                    <a href="#">three</a>
                </li>
                <li class="item">
                    <a href="#">four</a>
                </li>
                <li class="item">
                    <a href="#">five</a>
                </li>
            </ul>
            <ul class="bullets-nav carousel-nav">
                <li class="item active"><a href="#">1</a></li>            
                <li class="item"><a href="#">2</a></li>           
                <li class="item"><a href="#">3</a></li>           
                <li class="item"><a href="#">4</a></li>
                <li class="item"><a href="#">5</a></li>
            </ul>
    </div>
</div>

CSS

.carousel .item{
    width: 200px;
    height: 120px;
    background: #eee;
}


.thumbs-nav{
    margin: 0;
}

.thumbs-nav .item a{
    background: #ddd;
    display:block;
}

.thumbs-nav .item a:hover{
    background: #999;
}

.carousel-nav .active a{
    background: #f00;
}

JavaScript

var carouselFeature = {

    container: '.carousel-feature',
    carouselNav: '.carousel-nav',
    run: function() {
        this.init()
    },

    init: function() {
        var that = this;

        this.thumbElementResize();

        var carousel = $(this.container + ' .carousel').carousel({
            interval: 3000
        }).bind('slid', function(event) {
            var elements = $(this).find('.item').length;
            var index = $(this).find('.active').index();
            that.highLight(index);
        });
        $(this.container + ' ' + this.carouselNav + ' .item a').click(function(e) {
            e.preventDefault();
            var index = $(this).parent().index();
            carousel.carousel(index);
            that.highLight(index);
        });
    },

    highLight: function(index) {

        $(this.carouselNav).each(function(i) {
            var elements = $(this).find('.item');
            elements.removeClass('active');
            elements.eq(index).addClass('active');
        });
    },

    thumbElementResize: function() {

        var carousel_container = $('.carousel-inner .item');
        var height = (carousel_container.height() / carousel_container.length);
        $(this.container + ' .thumbs-nav .item a').css('height', height);
    },
}.run();