JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div class="center-carousel">
<div id="carousel-blurry" class="carousel slide" data-pause="true">
  <div class="carousel-inner">
    <div class="item active">
        <img src="http://farm4.staticflickr.com/3786/9950768284_3108d1f474.jpg" />
    </div>
    <div class="item">
        <img src="http://farm4.staticflickr.com/3678/9946866823_93b850aef8.jpg" />
    </div>
    <div class="item">
        <img src="http://farm6.staticflickr.com/5545/9953259364_2bc65f2508.jpg" />
    </div>
  </div>
</div>

<div id="carousel-example-generic" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
        <img src="http://farm4.staticflickr.com/3786/9950768284_3108d1f474.jpg" />
    </div>
    <div class="item">
        <img src="http://farm4.staticflickr.com/3678/9946866823_93b850aef8.jpg" />
    </div>
    <div class="item">
        <img src="http://farm6.staticflickr.com/5545/9953259364_2bc65f2508.jpg" />
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

CSS

</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
.center-carousel {
    text-align: center;
    overflow: hidden;
    position: relative;
}
#carousel-example-generic {
    height: 200px;
    width: 500px;
    position: absolute;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    overflow: hidden;
    box-shadow: 0 0 10px #000;
}
.carousel-control {
    width: 7%;
}
#carousel-blurry {
    height: 200px;
    overflow: hidden;
    background: #000;
}
#carousel-blurry img {
    -webkit-filter: blur(3px);
    min-width: 100%;
    margin-top: -10px;
    opacity: 0.6;
}
</style>

JavaScript

var blurry = $('#carousel-blurry')
$('#carousel-example-generic').on('slide.bs.carousel', function (e)  {
    var way = (e.direction=='left')?'next':'prev'
    blurry.carousel(way)
})