<div class="stage">
	<div id="SLDR-ONE" class="sldr">
		<ul class="wrp animate">
			<li class="elmnt-one"><div class="skew"><div class="wrap"><img src="images/1.jpg" width="1000" height="563"></div></div></li>
			<li class="elmnt-two"><div class="skew"><div class="wrap"><img src="images/2.jpg" width="1000" height="563"></div></div></li>
			<li class="elmnt-three"><div class="skew"><div class="wrap"><img src="images/3.jpg" width="1000" height="563"></div></div></li>
			<li class="elmnt-four"><div class="skew"><div class="wrap"><img src="images/4.jpg" width="1000" height="563"></div></div></li>
            <li class="elmnt-five"><div class="skew"><div class="wrap"><img src="images/5.jpg" width="1000" height="563"></div></div></li>
		</ul>
	</div>

	<div class="clear"></div>

	<button class="sldr-prv sldr-nav prev">Prev</button>
	<button class="sldr-nxt sldr-nav next">Next</button>

</div>
<div class="clearfix m30"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>">
<script src="http://www.freetimelearning.com/plugins/sliders/slider-7/js/jquery.sldr.js"></script>

body { color: #444; font-family: Helvetica, sans-serif; margin: 0; background:url(../images/bg.jpg); background-attachment:fixed; background-position:center; }
button { margin-top: 10px; }
ul {
	color: #ECECEC;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
p {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
a {
	color: #F60;
	-webkit-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: color 0.25s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:50px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}
button {
	color: #FFF;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	border: none;
	background: #F60;
	padding: 8px 14px;
}

ul.animate {
	-webkit-transition: -webkit-transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: transform 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */	
}
.m10{ margin:10px auto;}.m20{ margin:20px auto;}.m30{ margin:30px auto;}
.stage {
	width: 76%;
	margin: 0 auto;
	padding: 0 12%;
	text-align: center;
	overflow: hidden;
}
	
.sldr {
	max-width: 825px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	clear: both;
	display: block;
}

.sldr > ul > li {
	float: left;
	display: block;
	width: 825px;
}

div.skew {
	max-width: 825px;
	margin: 0 auto;

	display: block;
	overflow: hidden;

	-webkit-transform: skewX(16deg);
       -moz-transform: skewX(16deg);
        -ms-transform: skewX(16deg);
            transform: skewX(16deg);
}

div.skew > div.wrap {
	display: block;
	overflow: hidden;

	-webkit-transform: skewX(-16deg);
	   -moz-transform: skewX(-16deg);
	    -ms-transform: skewX(-16deg);
	        transform: skewX(-16deg);

	margin-left: -10.1%;
	width: 122%;
}

img {
	max-width: 1000px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.selectors {
	/*margin: 15px 0 0;*/
}

.selectors li {
	font-size: 46px;
	line-height: 32px;
	display: inline;
	padding: 0 2px;	
}

.selectors li a {
	text-decoration: none;
}

.selectors li.focalPoint a {
	color: #CCC;
	cursor: default;
}

.captions div {
	left: 200%;
	position: fixed;
	opacity: 0;

	-webkit-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: opacity 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */
}

.captions div.focalPoint {
	opacity: 1;
	left: inherit;
	position: static;
}

.clear {
	display: block;
	width: 100%;
	height: 0px;
	overflow: hidden;
	clear: both;
}

$( window ).load( function() {

	$( '.sldr' ).each( function() {
		var th = $( this );
		th.sldr({
			focalClass    : 'focalPoint',
			offset        : th.width() / 2,
			sldrWidth     : 'responsive',
			nextSlide     : th.nextAll( '.sldr-nav.next:first' ),
			previousSlide : th.nextAll( '.sldr-nav.prev:first' ),
			selectors     : th.nextAll( '.selectors:first' ).find( 'li' ),
			toggle        : th.nextAll( '.captions:first' ).find( 'div' ),
			sldrInit      : sliderInit,
			sldrStart     : slideStart,
			sldrComplete  : slideComplete,
			sldrLoaded    : sliderLoaded,
			sldrAuto      : true,
			sldrTime      : 5000,
			hasChange     : true
		});
	});

});
function sliderInit( args ) {

}
function slideLoaded( args ) {

}
function sliderLoaded( args ) {

}
function slideStart( args ) {

}
function slideComplete( args ) {

}