Slick Carousel Demo

by bhupendra negi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://raw.githubusercontent.com/hdmchl/gest.js/master/src/gest.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

CSS

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

JavaScript

window.gest=function(e){"use strict";navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var t={framerate:25,videoCompressionRate:4,sensitivity:80,skinFilter:false,debug:{state:false,canvas:null,context:null}},n=false,r=false,i,s,o,u,a=function(){function t(){m.removeEventListener("DOMContentLoaded",document,t);m.removeEventListener("load",e,t);if(l()){n=true}if(r&&n){return e.gest.start()}return false}if(a.prototype._singletonInstance){return a.prototype._singletonInstance}a.prototype._singletonInstance=this;if(document.readyState==="complete"){t.call()}else{m.addEventListener("DOMContentLoaded",document,t);m.addEventListener("load",e,t)}return true},f=function(e){var t=m.createCustomEvent("gest",document);t.direction=e.direction||null;t.up=e.up||false;t.down=e.down||false;t.left=e.left||false;t.right=e.right||false;t.error=e.error||null;m.fireEvent(t)},l=function(){s=document.createElement("video");o=document.createElement("canvas");if(!!s.canPlayType&&!!(o.getContext&&o.getContext("2d"))&&!!navigator.getUserMedia){s.width=300;s.height=225;s.setAttribute("style","visibility: hidden;");document.body.appendChild(s);o.setAttribute("style","width: 300px; display: none;");document.body.appendChild(o);u=o.getContext("2d")}else{c(0);return false}return true},c=function(e,n){var r;switch(e){case 0:r={code:e,message:"gest.js can't run in your browser :("};break;case 1:r={code:e,message:"gest.js could not start."};break;case 2:r={code:e,message:"gest.js has already started."};break;case 10:r={code:e,message:"DEEENIED! gest.js needs webcam access.",obj:n};break;case 11:r={code:e,message:"A constraint specified is not supported by the web-browser.",obj:n};break;case 12:r={code:e,message:"No media tracks of the type specified in the constraints are found.",obj:n};break;case 13:r={code:e,message:"Couldn't get access to...