JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div id="slide1" class="item">This is a test slide.</div>
        <div id="slide2" class="item">
            <input type="text" placeholder="name" name="full_name" />
        </div>
    </div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

JavaScript

$('#myCarousel').carousel({
    interval: 1000,
    pause: "hover"
});

$('input').focus(function(){
   $("#myCarousel").carousel('pause');
}).blur(function() {
   $("#myCarousel").carousel('cycle');
});