JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
    <!-- Indicators -->
 
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Bootstrap 3 Carousel</h1>

                    <p>Pictures slide with overlapping words</p>
                    <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>

                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Each Slide can be different</h1>

                    <p>I just need some one to pick the pictures and words</p>
                    <p><a class="btn btn-large btn-primary" href="#">Learn more</a>

                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive">
            <div class="container">
                <div class="carousel-caption">
                     <h1>Percentage-based sizing</h1>

                    <p>This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on...

CSS

.item{height:100vh; width:100vw}
.item img{min-height:100vh; width:auto;position:fi; top:0}

JavaScript

$('#myCarousel').carousel({
    interval: 3000,
    cycle: true
});