JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<link rel="Stylesheet" type="text/css" href="http://hdfccampaign.appspot.com/style/carousel.css"
/>
<script type="text/javascript" src="http://hdfccampaign.appspot.com/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://hdfccampaign.appspot.com/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://hdfccampaign.appspot.com/js/jquery.carousel-1.1.min.js"></script>
</head>
<body>
<div class="carousel">
<!-- BEGIN CONTAINER -->
<div id="title">hi</div>
<div class="slides">
<!-- BEGIN CAROUSEL -->
</div>
<!-- END CAROUSEL -->
</div>
</body>
</html>
JavaScript
$(document).ready(function () {
});
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/cZxy-GpHLCQ_Ss9sGJfWhzBAIOMDYxMN?v=2&alt=json&callback=?';
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function (data) {
var list_data = "";
$.each(data.feed.entry, function (i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
list_data += '<div><a href= "#" title="' + feedTitle + '"><img src="' + thumb + '" width="213px" height="141px"/></a></div>';
});
$(list_data).appendTo(".slides");
$('.carousel').carousel({
carouselWidth: 930,
carouselHeight: 330,
directionNav: true,
shadow: true,
buttonNav: 'bullets'
});
var $items = $(".slides").find(".slideItem");
$(".nextButton, .prevButton").click(function () {
$("#title").text($items.filter(function () {
return $(this).css("top") == "0px";
}).find("a").attr("title"));
});
});