JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-wrapper">
  <div id="hero-container" class="swipe slide">
    <ul class="hero transparent">
      <li><span>Image 01</span></li>
      <li><span>Image 02</span></li>
      <li><span>Image 03</span></li>
      <li><span>Image 04</span></li>
    </ul>
    <div id="prev-container"><span class="nav prev-button center white">Prev</span></div>
	<div id="next-container"><span class="nav next-button center white">Next</span></div>
  <div id="menu-wrapper-left" class="slide">
    <div id="menu-content">
      <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
    </div>
    <svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
     <filter id='blur'>
       <feGaussianBlur stdDeviation='10' />
       </filter>
    </svg>
  </div>
  </div>
  <div class="trigger-wrapper slide"></div>
</div>

CSS

* {margin:0;padding:0; position: relative;}
html {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
body {
	width: 1000px;
	min-height: 100%;
	overflow: hidden;
}
#page-wrapper {
	width: 1000px;
	min-height: 100%;
	overflow: hidden;
	position: relative;
}
.trigger-wrapper {
	height:45px;
	width:45px;
	position:fixed;
	z-index:9999;
	top:10px;
	left:10px;
	background:red;
}
#menu-wrapper-left {
	height:100%;
	width:300px;
	position: fixed;
    display: none;
	background:white;
	top:0;
    opacity:0.5;
	z-index:5;
	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	left:0px;
}
#menu-wrapper-left:before {
	content: '';
	position: absolute;
	top: 0;
	left:0;
	right:0;
	bottom:0;
	background: inherit;
	background-color: rgba(0,0,0,.1);
	filter: blur(10px); 
	-webkit-filter: blur(10px); 
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}
#menu-content {
	height:100%;
	width:300px;
	background: rgba(255,255,255,.2);
}
<!-- Needed to blur in Firefox -->
svg {
  height:0;
  width: 0;
}
#hero-container {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 3;
    left: 0px;
    background: url(http://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
	background-size: cover;
}

.hero,
.hero:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1;
}
#prev-container {
	height:100%;
	width:15%;
	position:fixed;
	top:0;
	left:0;
	z-index:3;
	opacity:0;
	-webkit-transition: 1s;
	   -moz-transition: 1s;
	    -ms-transition: 1s;
	     -o-transition: 1s;
		    transition: 1s;
}
#prev-container:hover {
	opacity:1;
}
.prev-button {
	height:45px;
	width:45px;
	position:fixed;
	z-index: 2;
	top: 45%;
	left:10px;
	background:#FC2975;
	border-radius: 40px;
	-webkit-backface-visibility: hidden;
	cursor: pointer;
}
#next-container...

JavaScript

jQuery(document).ready(function($) {
	$(".trigger-wrapper").click(function () {
		$("#menu-wrapper-left").stop().animate({width: 'toggle'});
        $('#hero-container').css('background-image','url(http://dummyimage.com/600x400/000/fff.jpg)');
		return false;
	});
});

jQuery(document).ready(function($) {
	Slider = $('#hero-container').Swipe({
		auto: false,
		continuous: true
	}).data('Swipe');

	$('.next-button').on('click', Slider.next);
	$('.prev-button').on('click', Slider.prev);
});

function Swipe(container, options) {

  "use strict";

  // utilities
  var noop = function() {}; // simple no operation function
  var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
  
  // check browser capabilities
  var browser = {
    addEventListener: !!window.addEventListener,
    touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
    transitions: (function(temp) {
      var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
      for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
      return false;
    })(document.createElement('swipe'))
  };

  // quit if no root element
  if (!container) return;
  var element = container.children[0];
  var slides, slidePos, width, length;
  options = options || {};
  var index = parseInt(options.startSlide, 10) || 0;
  var speed = options.speed || 300;
  options.continuous = options.continuous !== undefined ? options.continuous : true;

  function setup() {

    // cache slides
    slides = element.children;
    length = slides.length;

    // set continuous to false if only one slide
    if (slides.length < 2) options.continuous = false;

    //special case if two slides
    if (browser.transitions && options.continuous && slides.length < 3) {
      element.appendChild(slides[0].cloneNode(true));
      element.appendChild(element.children[1].cloneNode(true));
      slides...