JSFiddle - React, Tailwind, and code Playground

by crowjonah

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 slide">
    <div class="carousel-inner">
        <div class="overlay"></div>
        <div class="item active">
            <a href="popup_img1.htm"><img src="http://www.placehold.it/292x163&text=One" /></a>
        </div>
        <div class="item">
            <a href="popup_img2.htm"><img src="http://www.placehold.it/292x163&text=Two" /></a>
        </div>
        <div class="item">
            <a href="popup_img3.htm"><img src="http://www.placehold.it/292x163&text=Three" /></a>
        </div>
     </div>
     <a class="carousel-control left" href=".carousel" data-slide="prev">‹</a>
     <a class="carousel-control right" href=".carousel" data-slide="next">›</a>
 </div>

CSS

.overlay {
    background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}
.carousel {
  width: 292px;
  height: 163px;
}
.carousel .carousel-inner {
    width: 292px;
    height: 163px;
    position: relative;
}
.carousel .carousel-inner img {width: 100%; height: 100%;}
.carousel-control {
  margin-top: 0;
  top: 0;
  right: 0;
  background: none;
  border: 0;
  width: 60px;
  height: 163px;
  opacity: 0.65;
  background-repeat: no-repeat;
}
.carousel-control:hover.right {
      background-image: url('/assets/index/r_arrow.png');
}

.carousel-control:hover.left {
      background-image: url('/assets/index/l_arrow.png');
}

JavaScript

$('.carousel').carousel()