Owl demo proble on bootstrap tab

by Sambora

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <p>I'm in Section 1.</p>
        <div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
 
</div>
    </div>
    <div class="tab-pane" id="tab2">
    <p>Howdy, I'm in Section 2.</p>
        <div id="owl-demo2" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
 
</div>
    </div>
    </div>
    </div>

CSS

#owl-demo .item {
    background: none repeat scroll 0 0 #42BDC2;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    margin: 5px;
    padding: 30px 0;
    text-align: center;
}
#owl-demo2 .item {
    background: none repeat scroll 0 0 #00FF00;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    margin: 5px;
    padding: 30px 0;
    text-align: center;
}

JavaScript

$(document).ready(function() {
     
    $("#owl-demo").owlCarousel({
    navigation : true
    });
        
         $("#owl-demo2").owlCarousel({
    navigation : true
    });
     
    });