JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://leemark.github.io/better-simple-slideshow/demo/js/hammer.min.js"></script>
<script src="http://leemark.github.io/better-simple-slideshow/js/better-simple-slideshow.min.js"></script>
<div class="bss-slides num2" tabindex="2">
           <figure>
              <img src="demo/img/colorado.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption> 
           </figure>
            <figure>
                <img src="demo/img/colorado-colors.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption> 
           </figure>
           <figure>
              <img src="demo/img/sunrise.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption> 
           </figure>
            <figure>
              <img src="demo/img/public-domain-images-archive-high-quality-resolution-free-download-splitshire-0003.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="http://www.flickr.com/photos/22746515@N02/5277611659/">Bert Kaufmann</a>.</figcaption> 
           </figure>
            <figure>
              <img src="demo/img/public-domain-images-free-high-resolution-quality-photos-featured-images-0002.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="http://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption> 
           </figure>
        </div>

CSS

*{margin:0;padding:0;}
body {
  background: #111; 
  font-family: 'Open Sans', sans-serif;    
  color: #fff;   
  overflow-x: hidden;    
}
header{
  position: absolute;
  z-index: 9999;
  width: 100%;    
  background: rgba(0,0,0,.5);    
}
h1, h2, h3{   
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700; 
    margin: .8em 0 .2em 0;
}    
h1{   
 margin: .2em .5em;
 display: inline-block;       
}
header p{
 display: inline-block; 
 font-size: .9em;    
}
.content{
    margin: 1em 2em;    
}
.content ul, .content ol{
    margin: .8em 1em .8em 2em;   
}
span.code{
    font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;   
    color: #999;
}
.gist{
    margin: 1em 1em 2em 2em;
}
ol .gist{
    margin: 1em 0 2em 0;
}
a{ 
    color:#fff;
}
.num2{
    width: 85%;
    margin: 2em auto;
}
footer{
    color: #ccc;
    font-size: .8em;
    font-style: italic;
    text-align: center;
    background: #000;
    padding: 1.5em 0 .5em 0;
    margin-top: 5em;
}
footer span{
    font-size: 1.3em;
    color: #fff;
}
@media screen and (max-width: 830px){
    h1{
     font-size: 1.3em;   
    }
    .desc{
        display: none;   
    }
}

@media screen and (max-width: 400px){
    h1{
     font-size: 1.1em;   
    }
    header span{
        display: none;   
    }
    .gist{
        width: 100%;
    }
}
.bss-slides{
  position: relative;
  display: block;    
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
 ...

JavaScript

var opts = {
    auto : {
        speed : 3500, 
        pauseOnHover : true
    },
    fullScreen : false, 
    swipe : true
};
makeBSS('.num1', opts);

var opts2 = {
    auto : true,
    fullScreen : true,
    swipe : true
};
makeBSS('.num2', opts2);