Corousel does not work correctly

var t;

var start = $('#myCarousel').find('.active').attr('data-interval');
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

$('#myCarousel').on('slid.bs.carousel', function () {  
     clearTimeout(t);  
     var duration = $(this).find('.active').attr('data-interval');
    
     $('#myCarousel').carousel('pause');
     t = setTimeout("$('#myCarousel').carousel();", duration-1000);
})

$('.carousel-control.right').on('click', function(){
    clearTimeout(t);   
});

$('.carousel-control.left').on('click', function(){
    clearTimeout(t);   
});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide">
    
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item" data-interval="3000">
            <img src="http://placehold.it/300x200/888&text=Item1" />
        </div>
        <div class="item" data-interval="6000">
            <img src="http://placehold.it/300x200/aaa&text=Item2" />
        </div>
        <div class="item" data-interval="9000">
            <img src="http://placehold.it/300x200/444&text=Item3" />
        </div>
    </div>
    
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>