JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.13/vue.min.js"></script>
<section id="slideshow" v-style="styles">
    <slider inline-template img-count="4" v-ref="slider" class="slider">
        <div class="slides" v-style="styles">
            <sliderslide v-repeat="count" v-ref="slide">
                <img src="http://i.imgur.com/B8tI21j.jpg" alt="HM722 Silver Creek" style="margin-top:-15%;" />
            </sliderslide>
        </div>

        <div class="thumbnails">
            <div class="thumbnail-wrapper" v-style="thumbnailStyles">
                <sliderthumb v-repeat="count" send-index="{{ updateIndex }}" v-ref="thumb" 
                    image-src="http://i.imgur.com/WejrqSn.jpg" 
                    image-alt="" 
                    caption="Newest Product">
                </sliderthumb>
            </div>
        </div>
    </slider>
</section><!-- END #SLIDESHOW -->

CSS

#slideshow {
	@extend .slider;
	height: auto !important;
}
.slider {
    display: block;
	overflow: hidden;
	position: relative;
    height: auto !important;
}

	.slider .thumbnails {
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		background: rgba(255, 255, 255, .75);
    }
        .slider .thumbnails .thumbnail-wrapper {
            height: 105px;
            width: 100%;
        }

		.slider .thumbnails .thumbnail-wrapper .thumb {
            cursor: pointer;
            display: inline-block;
            position: relative;
        }

				.slider .thumbnails .thumbnail-wrapper .thumb .caption {
					display: block;
					background-color: rgba(0, 0, 0, .28);
					text-align: center;
					box-sizing: border-box;
					padding: 4px 14px;
					position: absolute;
					width: 100%;
					bottom: 0;
					color: #fff;
                    text-transform: uppercase;
					font-weight: bold;
				}

                .slider .thumbnails .thumbnail-wrapper .thumb:hover .caption,
                .slider .thumbnails .thumbnail-wrapper .thumb.active .caption {
                    background-color: rgba(0, 0, 0, .75);
					color: #fff;
					transition: .3s ease-in-out;
                }

	.slider .slides {
		display: block;
		padding: 0;
		margin: 0;
		transform: translateZ(0);
		transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
		transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
		overflow: hidden;
		position: relative;
        height: auto !important;
    }

		.slider .slides .slide {
			float: left;
			width: 100%;
			height: 100%;
			overflow: hidden;
        }

			.slider .slides .slide img {
				position: relative;
                max-width: 100%;
                height: auto !important;
			}

JavaScript

var HomepageSlideshow = new Vue({
	el: '#slideshow',

	data: {
		style: {
			height: 'auto'
		}
	},

	computed: {
		height: function() {
			if( this.style.height !== 'auto' ) {
				return this.style.height + 'px';
			}

			return this.style.height;
		},
		styles: function() {
			return {
				height: this.height
			}
		}
	},

	ready: function() {
		var height = $(window).height() - $('header').height();
		this.style.height = height;

		// Update slider dimensions when vue is attached to DOM
		this.$.slider.updateDimensions();
	},

	components: {
		'slider': {
            template: '',

            replace: false,

            data: function() {
                return {
                    current: 0, // Current slide
                    speed: 700, // Speed of animation to slide
                    count: 0, // How many slides are in this slider object
                    thumbnailHeight: 200, // The height of the thumbnails,
                    thumbnailWidth: 500,
                    slideWidth: 800,
                    style: {
                        width: 800,
                        height: 400,
                        marginLeft: 0 // The margin left on the entire slider container (to flip slides)
                    }
                }
            },

            computed: {
                height: function() {
                    if( this.style.height !== 'auto' ) {
                        return this.style.height;
                    }

                    return this.style.height;
                },
                styles: function() {
                    return {
                        width: this.style.width + 'px',
                        height: this.height + 'px',
                        marginLeft: '-' + this.style.marginLeft + 'px'
                    }
                },
                thumbnailStyles: function() {
                    return {
                        width: this.thumbnailWidth + 'px'
                    }
                }
  ...