JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://www.innovation-laboratories.com/css/nerveSlider-product.min.css">
<script src="//www.builtbyevolve.com/files/nerveSlider/jquery.nerveSlider.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

   <div id="product-slider-nav-left"></div>
<div id="product-slider-nav-right"></div>
<div id="product-slider-nav-down"></div>
<div id="product-slider-nav-up"></div>
 <div class="product-slider-nav">
<ul class="slider-nav">


  <li id="sn-1" class="current-sn"><img src="https://s3.amazonaws.com/hangw/v2/playv2.png" width="73" height="54" alt=""/><div id="ps-icon-text-1">RESEARCH</div></li>
      <li id="sn-2" class=""><img src="https://s3.amazonaws.com/hangw/v2/playv2.png" width="73" height="54" alt=""/><div id="ps-icon-text-1">RESEARCH</div></li>
        <li id="sn-3" class=""><img src="https://s3.amazonaws.com/hangw/v2/playv2.png" width="73" height="54" alt=""/><div id="ps-icon-text-1">RESEARCH</div></li>
          <li id="sn-4" class=""><img src="https://s3.amazonaws.com/hangw/v2/playv2.png" width="73" height="54" alt=""/><div id="ps-icon-text-1">RESEARCH</div></li>
           <li id="sn-5" class=""><img src="https://s3.amazonaws.com/hangw/v2/playv2.png" width="73" height="54" alt=""/><div id="ps-icon-text-1">RESEARCH</div></li>
  </ul></div>
    <div class="slider-wrapper">
      <div class="slider-product">
   <div><div class="slider-product-panel">
 
 <img src="https://media04.adonnante.com/media/2015/10/course-au-large-imoca-vplp-design-alex-thomson-hugo-boss-llyod-images-445-1180x750.jpg" width="1180" height="750" alt="">
 
</div></div>
  
     <div><div class="slider-product-panel">
 
 <img src="https://media04.adonnante.com/media/2015/10/course-au-large-imoca-vplp-design-alex-thomson-hugo-boss-llyod-images-445-1180x750.jpg" width="1180" height="750" alt="">
 
</div></div>
  
     <div><div...

CSS

#product-slider-nav-right {
	position: absolute;
	left: 1200px;
	top: 400px;
	width: 45px;
	height: 60px;
	background-image: url(icons/next-light.png);
	cursor: pointer;
	opacity: 0.4;
	z-index: 9999;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
#product-slider-nav-right:hover {
	opacity: 0.9;
}
#product-slider-nav-left:hover {
	opacity: 0.9;
}
#product-slider-nav-left {
	position: absolute;
	left: -65px;
	top: 400px;
	width: 45px;
	height: 60px;
	background-image: url(icons/prev-light.png);
	cursor: pointer;
	opacity: 0.4;
	z-index: 9999;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

#product-slider-nav-down:hover {
	opacity: 0.9;
	top: 815px;
	
	
}
#product-slider-nav-down {
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	position: absolute;
	left: 569px;
	top: 810px;
	width: 45px;
	height: 60px;
	background-image: url(icons/prev-light.png);
	cursor: pointer;
	opacity: 0.4;
	z-index: 9999;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
#product-slider-nav-up:hover {
	opacity: 0.9;
	top: 815px;
	
	
}
#product-slider-nav-up {
	display:none;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	position: absolute;
	left: 569px;
	top: 825px;
	width: 45px;
	height: 60px;
	background-image: url(icons/prev-light.png);
	cursor: pointer;
	opacity: 0.4;
	z-index: 9999;
	-webkit-transition: all 400ms...

JavaScript

$(".slider-product").startslider({
		sliderWidth:1180,
		sliderHeight:750,
		waitForLoad:false,
		sliderTheme:"dark",
		sliderAutoPlay:false,
		sliderHeightAdaptable:false,
		sliderResizable:false,
		showFilmstrip:false,
		slideTransition:'slide',
		slideTransitionSpeed:1300,
		slideTransitionEasing: "easeInOutExpo",
slideTransitionDelay:15000,
		slidesDraggable:true,
		showTimer:false,
		showArrows:false,
		showDots:true,
		});