JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.3.1'></script>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">


<div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
            
            <div class="active item" style="background-image: url('http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg')">
                <div class="carousel-caption">
                  <h4><a href="#">Title 1</a></h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan varius risus, non auctor justo interdum et. Nam iaculis, mauris nec consequat viverra, eros est suscipit ipsum, in vestibulum lorem ipsum id urna. Suspendisse vitae pulvinar nisi. Etiam vitae dictum massa. Fusce viverra cursus nisl at accumsan. In congue urna vel nisl aliquam scelerisque iaculis&nbsp;<a href="http://sos.dev42.nl/test-post-from-alex/">read more »</a></p>
    <a href="#" class="whole"></a>
                </div>
              </div>
        
            <div class="item" style="background-image: url('http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg')">
                <div class="carousel-caption">
                  <h4><a href="#">Title 2</a></h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan varius risus, non auctor justo interdum et. Nam iaculis, mauris nec consequat viverra, eros est suscipit ipsum, in vestibulum lorem ipsum id urna. Suspendisse vitae pulvinar nisi. Etiam vitae dictum massa. Fusce viverra cursus nisl at accumsan. In congue urna vel nisl aliquam scelerisque iaculis&nbsp;<a href="http://sos.dev42.nl/test-post-from-alex/">read more »</a></p>
    <a href="#" class="whole"></a>
                </div>
              </div>
        
             <div class="item" style="background-image:...

CSS

.carousel, .carousel-inner .item {height:230px}
.carousel-control {top: 15% !important;}

#myCarousel {margin:30px 0px 0px;}

.carousel-caption h4 a {color:white; font-size:24px;}
.carousel-caption p {
margin-bottom: 0;
}

.carousel-inner .item a.whole {
display: block;
width: 100%;
height: 230px;
z-index: 10001;
position: absolute;
bottom: 0px;
}

.carousel-caption p a {display:none;}

#carousel-nav {
text-align: center;
border-bottom: 1px dotted #CCC;
}

#carousel-nav a {
margin: 5px 0px;
background: url(http://i.imgur.com/zUwo5.png) no-repeat 0 0;
display: inline-block;
width: 12px;
height: 12px;
opacity: 0.5;
filter: alpha(opacity=50);
}

#carousel-rel{
margin: -24px 0px 0px;
font-size: 0.9em;
}

#carousel-nav a.active {
background: url(http://i.imgur.com/PkdhB.png) no-repeat 0 0; color: red;
}

.right,
.alignright {
    float: right;
    padding-left: 5px;
}

#myCarousel .right
 {
    float: none;
}

JavaScript

$('.carousel').carousel({
  interval: 7000
})
$('#carousel-nav a').click(function(q){
    q.preventDefault();
    targetSlide = $(this).attr('data-to')-1;
    $('#myCarousel').carousel(targetSlide);
});

$('#myCarousel').bind('slid', function() {
    // Get currently selected item
    var item = $('#myCarousel .carousel-inner .item.active');

    // Deactivate all nav links
    $('#carousel-nav a').removeClass('active');

    // Index is 1-based, use this to activate the nav link based on slide
    var index = item.index() + 1;
    $('#carousel-nav a:nth-child(' + index + ')').addClass('active');
});