JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="carousel" id="banner_carousel">
<div class="carousel-inner">
<div class="item" id="big_banner">
<a>
<img class="big_banner_img" src="">
</a>
<div id="main_slider">
</div>
<!-- #main_slider-->
<div id="widget_big_banner">
<div class="wrap">
<div class="category_big_banner">Film</div>
<i></i>
<span><a class="title_big_banner">FilmName</a></span>
<em></em>
<div class="description_big_banner">
description description
</div>
<div class="rating_big_banner">
<div class="rating_star">
</div>
<div class="rating_star">
</div>
<div class="rating_star">
</div>
<div class="rating_star">
</div>
<div class="rating_star">
</div>
</div>
<div class="wrap_buy_btn">
<a class="buy_btn btn">Action</a> </div>
</div>
</div>
</div>
<!-- #big_banner-->
<div class="item active" id="big_banner">
<a >
<img class="big_banner_img"...
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
font: 12px/14px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background: url("/Content/images/background.gif") 0 0 repeat #20262e;
overflow-x: hidden;
}
a {
color: #0099ff;
font-size: 14px;
outline: none;
text-decoration: underline;
cursor: pointer;
}
a:hover {
color: #ffcd00;
}
#container {
margin-top:15px;
margin-left:10px
}
textarea {
width: 100%;
height: 152px;
}
.head_table .red,
.red {
color: #f00;
}
h1, h2, h3, h4, h5 {
color: #ffcb08;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 24px;
height: 30px;
line-height: 30px;
}
h1 {
height: 30px;
line-height: 30px;
font-size: 24px;
}
h4 {
height:30px;
line-height: 30px;
font-size: 18px;
font-weight: normal;
}
p {
text-align: justify;
}
p,
.p {
margin: 0 0 14px;
}
img {
display: block;
border: none;
}
input {
vertical-align: middle;
}
ul {
list-style: none;
}
#wrapper {
width: 972px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: #ccc;
}
.list li,
#logotype,
#banners li,
#content,
.headLine li,
.headLine_link li,
.headLine_icon .iArr,
.language,
.icon,
.headLine_icon span,
.tabs li,
.details_info .poster,
#sidebar img,
.footer_list_link>li,
.counter_list li,
.made img,
#searchBlock li,
.star_for_rating li,
.movie .poster,
.actions li,
.socialList li,
.tools_place li,
.poll_results dl dt,
.poll_results dl dd
{
float: left;
}
#sidebar,
#userNavigation,
.headLine_link,
.username span,
.iUser
{
float: right;
}
.icon,
.icon i,
.headLine_icon span,
.username {
display: block;
}
.wrap,
.ibtn_wrap,
#userNavigation,
#userNavigation .username,
#userNavigation .headLine_link,
#banners,
.infoBlock .details_info,
.btn_buy_ticket,
.recommend_list,
.recommend_list>ul,
.fav_list,
.counter_list,
.footer_list_link,
...
JavaScript
$(document).ready(function() {
$('.carousel').carousel();
});