JSFiddle - React, Tailwind, and code Playground

by skunheal

HTML

<div id="show">show</div>		 
<div id="portfolioOverlay">
		<div class="slider">
			<ul class="slides">
				<li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>
				<li class="slide"><div class="box" style="background-color: #16a085;"></div></li>
				<li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>
				<li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>
				<li class="slide"><div class="box" style="background-color: #d35400;"></div></li>
				<li class="slide"><div class="box" style="background-color: #c0392b;"></div></li>	
			</ul>
		</div>
		  </div>

CSS

/*
PAGE STYLE
*/

*{ margin: 0; padding: 0; border: 0; }

#show{
    width:50px;
    height: 40px;
    background:#FF9000;
}


#portfolioOverlay{
    height: 500px;
    width: 100%;
    background: #fff;
    margin: auto;
    margin-top:100px;
    max-width: 500px;
    position:fixed;
    z-index: 10;
    display:none; /* IF YOU REMOVE THIS EVERYTHING WILL WORK FINE */
}

/*
SLIDER STYLE 
*/

.box {
    width: 100%; 
    height: 100%;
}


.slider {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	background: #000;
}
	
	.slides {
		height: 100%;
		
		/* Simple clear fix */
		overflow: hidden;
		
		/**	
		 * Prevent blinking issue
		 * Not tested. Experimental.
		 */
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;

		/**
		 * Here is CSS transitions 
		 * responsible for slider animation in modern broswers
		 */
		-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		     -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		        transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	}
	
		.slide {
			height: 100%;
			float: left;
			clear: none;
		}


	.slider-arrows {}

		.slider-arrow {
			position: absolute;
			display: block;
			margin-bottom: -20px;
			padding: 20px;
		}

			.slider-arrow--right { bottom: 50%; right: 30px; }
			.slider-arrow--left { bottom: 50%; left: 30px; }


	.slider-nav {
		position: absolute;
		bottom: 30px;
	}

		.slider-nav__item {
			width: 12px;
			height: 12px;
			float: left;
			clear: none;
			display: block;
			margin: 0 5px;
			background: #fff;
		}

				.slider-nav__item:hover { background: #ccc; }
				.slider-nav__item--current { background: #000; }

JavaScript

/*
SHOW BUTTON
 */
       $(function() {

	$('#show').click(function() {
	    $('#portfolioOverlay').show();
   	

 
	});
	

	
      });
      

/*
SLIDER CODE
 */
;(function ($, window, document, undefined) {
	
	var name = 'glide',
		defaults = {
			
			// {Int or Bool} False for turning off autoplay
			autoplay: 4000,
			// {Bool} Pause autoplay on mouseover slider
			hoverpause: true,
			
			/**
			 * Animation time 
			 * !!! IMPORTANT !!!
			 * That option will be use only, when css3 are not suported
			 * If css3 are supported animation time is set in css declaration inside .css file
			 * @type {Int}
			 */
			animationTime: 500,

			/**
			 * {Bool or String} Show/hide/appendTo arrows
			 * True for append arrows to slider wrapper
			 * False for not appending arrows
			 * Id or class name (e.g. '.class-name') for appending to specific HTML markup
			 */
			arrows: true,
			// {String} Arrows wrapper class
			arrowsWrapperClass: 'slider-arrows',
			// {String} Main class for both arrows
			arrowMainClass: 'slider-arrow',
			// {String} Right arrow
			arrowRightClass: 'slider-arrow--right',
			// {String} Right arrow text
			arrowRightText: 'next',
			// {String} Left arrow
			arrowLeftClass: 'slider-arrow--left',
			// {String} Left arrow text
			arrowLeftText: 'prev',

			/**
			 * {Bool or String} Show/hide/appendTo bullets navigation
			 * True for append arrows to slider wrapper
			 * False for not appending arrows
			 * Id or class name (e.g. '.class-name') for appending to specific HTML markup
			 */
			nav: true,
			// {Bool} Center bullet navigation
			navCenter: true,
			// {String} Navigation class
			navClass: 'slider-nav',
			// {String} Navigation item class
			navItemClass: 'slider-nav__item',
			// {String} Current navigation item class
			navCurrentItemClass: 'slider-nav__item--current',

			// {Bool} Slide on left/right keyboard arrows press
			keyboard: true,

			// {Int or Bool} Touch settings
			touchDistance: 60,

			// {Function}...