Slidr Sets

So I wanted to have two slideshows using https://github.com/bchanx/slidr where the slides were already in the markup. Slidr doesn't have a replace feature for the 'added' slides and I wanted to avoid multiple slidrs. By utilising the horizontal feature I could achieve a similar outcome.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Slidr Sets</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="js-slidr">
    <div data-slidr="one" style="background-color: green">1</div>
    <div data-slidr="two" style="background-color: yellow">2</div>
    <div data-slidr="three" style="background-color: grey">3</div>
    <div data-slidr="four" style="background-color: red">4</div>
    <div data-slidr="five" style="background-color: pink">5</div>
    <div data-slidr="six" style="background-color: blue">6</div>
</div>
<a href="#" id="js-replace" class="switch">Replace</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#js-slidr {
  
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  
}

#js-slidr > div {
  
  width: 100%;
  height: 100%;
  padding: 3em 0;
  text-align: center;
  font-size: 2em;
  color: white;
  
}
.switch {
  
  position: fixed;
  top: 0;
  left: 0;
  
}
/* Downloaded from https://www.codeseek.co/ */
/*!
 * slidr v0.4.0 - A Javascript library for adding slide effects.
 * bchanx.com/slidr
 * MIT licensed
 *
 * Copyright (c) 2013 Brian Chan (bchanx.com)
 */
function E(){function H(){}function K(a,b,c){var d={id:a,a:b,g:null,controls:null,d:c,t:!1,u:!1,start:null,c:null,r:null,U:{},J:{},C:{},i:{up:null,down:null,left:null,right:null}};return{start:function(a){q.start(d,a);return this},canSlide:function(a){return q.M(d,a)},slide:function(a){q.q(d,a);return this},add:function(a,b,c,e){q.add(d,a,b,c,e);return this},auto:function(a,b,c){q.start(d,c);q.r(d,a||5E3,b||"right");return this},stop:function(){q.stop(d);return this},timing:function(a,b){a&&a.constructor===
Object?d.d.timing=A(d.d.timing,a):"string"===typeof a&&"string"===typeof b&&(d.d.timing[a]=b);return this},breadcrumbs:function(){q.g(d);return this},controls:function(a){q.controls(d,a);return this}}}function G(a,b){var c=a,d;for(d in b){if(!c||!c.hasOwnProperty(b[d]))return null;c=c[b[d]]}return c===a?null:c}function A(){for(var a={},b=0,c;c=arguments[b];b++)for(var d in c)a[d]=c[d];return a}function I(a,b){return a.contains?a.contains(b):a.compareDocumentPosition?a.compareDocumentPosition(b)&16:
0}function x(a,b){if(Array.prototype.indexOf)return a.indexOf(b);for(var c=0,d=a.length;c<d;c++)if(a[c]===b)return c;return-1}function J(a){return"".trim?a.trim():a.replace(/^\s+|\s+$/g,"")}function y(a,b){var c=document.createElement(a),d;for(d in b)c[d]=b[d];return c}function v(a,b){for(var c=J(a.className),c=c?c.split(/\s+/):[],d=2,g,f;g=arguments[d];d++)f=x(c,g),"add"===b&&0>f&&c.push(g),"rm"===b&&0<=f&&c.splice(f,1);a.className=c.join(" ");return a}function C(a){return a.replace(/[\s'"]/gi,"").split("").sort().join("")}
function D(a,b){return a&&a.getAttribute?a.getAttribute(b):null}function h(a,b){if("string"===typeof b){var c=document.defaultView?document.defaultView.getComputedStyle(a):a.currentStyle,d=c[e.o(b)];d||"opacity"!==b||(d=c.filter?c.filter.split("=")[1].replace(")",""):"1");return d?(c=d.slice(0,-2),"px"===d.slice(-2)&&!isNaN(parseInt(c))&&0>=c.search("px")?parseInt(c):d):"none"}for(d in b)e.o(d)&&(a.style[e.o(d)]=b[d]);return a}function w(a,b,c,d){"string"===typeof b&&(b=[b]);for(var g=0,f,F;f=b[g];g++)F=
0<x(e.L,f),f="click"===f&&"ontouchstart"in window?"touchend":a.attachEvent&&!F?"on"+f:f,a.attachEvent&&!F?d?a.detachEvent(f,c):a.attachEvent(f,c):d?a.removeEventListener(f,c):a.addEventListener(f,c)}function z(a){return"border-box"===h(a,"box-sizing")}var e={I:["webkit","Moz","ms","O"],e:{},R:{},j:function(){e.supports("filter")&&!e.supports("opacity")?e.j=function(){return!0}:e.j=function(){return!1};return e.j()},ha:document.getElementsByTagName("html")[0].style,styleSheet:function(){var a=y("style",
{type:"text/css"});document.getElementsByTagName("head")[0].appendChild(a);return a.sheet||a.styleSheet}(),cssRules:function(){e.cssRules=function(){return e.styleSheet.cssRules||e.styleSheet.rules};return e.cssRules()},insertRule:function(a){e.insertRule=e.styleSheet.insertRule?function(a){e.styleSheet.insertRule(a,e.cssRules().length)}:function(a){var c=a.split(" {");2===c.length&&(a=c[0],c=J(c[1].replace(/;?\s?}$/g,"")),a&&c&&e.styleSheet.addRule(a,c))};e.insertRule(a)},W:function(a,b,c){a=C(a);
for(var d=0,g,f;g=e.cssRules()[d];d++)if(f=C(g.name||g.selectorText||g.cssText.split(" {")[0]||""),f===a){if(c||C(g.cssText)===C(b))return;e.styleSheet.deleteRule(d);break}e.insertRule(b)},Z:function(a,b){var c=[a,"{"],d;for(d in b)e.o(d,!0)&&c.push(e.o(d,!0)+":"+b[d]+";");c.push("}");return c.join(" ")},f:function(a,b,c){e.W(a,e.Z(a,b),c)},prefix:function(a){return 3===a.split("-").length?"-"+a.split("-")[1]+"-":""},N:function(a,b){var c=e.o("animation",!0);if(c&&!e.R[a]){var c=["@"+e.prefix(c)+
"keyframes "+a+" {"],d;for(d in b)c.push(e.Z(d+"%",b[d]));c.push("}");e.W(a,c.join(" "));e.R[a]=!0}},o:function(a,b){if(!(a in e.e)){for(var c=a.split("-"),d=0,g;g=c[d];d++)c[d]=g[0].toUpperCase()+g.toLowerCase().slice(1);g=c.join("");g=g[0].toLowerCase()+g.slice(1);if(void 0!==e.ha[g])e.e[a]={s:a,aa:g};else for(g=c.join(""),d=0;d<e.I.length;d++)void 0!==e.ha[e.I[d]+g]&&(e.e[a]={s:"-"+e.I[d].toLowerCase()+"-"+a,aa:e.I[d]+g});e.e[a]||(e.e[a]=null)}return null!==e.e[a]?b?e.e[a].s:e.e[a].aa:null},supports:function(){for(var a=
0,b;b=arguments[a];a++)if(!e.o(b))return!1;return!0},add:{fade:function(a,b,c){e.N(a,{0:{opacity:b,visibility:"visible"},100:{opacity:c,visibility:"hidden"}})},linear:function(a,b,c,d,g,f){e.N(a,{0:{transform:"translate"+c[0]+"(0%)",opacity:"in"===b?"0":g,visibility:"visible"},1:{transform:"translate"+c+"px)",opacity:g},99:{transform:"translate"+d+"px)",opacity:f},100:{transform:"translate"+d[0]+"(0%)",opacity:"out"===b?"0":f,visibility:"hidden"}})},cube:function(a,b,c,d,g,f){e.N(a,{0:{transform:"rotate"+
b+"0deg) translateZ("+d+"px)",opacity:g,visibility:"visible"},100:{transform:"rotate"+c+"0deg) translateZ("+d+"px)",opacity:f,visibility:"hidden"}})}},Y:function(a){return{za:a,p:'aside[id*="-'+a+'"]',i:"slidr-"+a,v:'aside[id*="-'+a+'"] .slidr-'+a,data:"data-slidr-"+a,id:function(b,c){return c?'aside[id="'+b.id+"-"+a+'"]':b.id+"-"+a}}},n:function(a){a=a||window.event;a.target||(a.target=a.srcElement);a.currentTarget||(a.currentTarget=a.srcElement);!a.which&&a.keyCode&&(a.which=a.keyCode);return a},
stop:function(a){a=a||window.event;a.cancelBubble=!0;a.returnValue=!1;a.stopPropagation&&a.stopPropagation();a.preventDefault&&a.preventDefault();return!1},L:["animationend","webkitAnimationEnd","oanimationend","MSAnimationEnd"]},t={X:["cube","fade","linear","none"],K:function(a,b){b=b||a.d.transition;return 0>x(t.X,b)||!u.ia[b]?"none":b},get:function(a,b,c,d){return G(a.J,[b,"in"===c?l.H(d):d])},set:function(a,b,c,d){d=t.K(a,d);a.J[b]||(a.J[b]={});return a.J[b][c]=d},apply:function(a,b,c,d,g){p.update(a,
b,c);u.A(a,b,g,c,d)}},r={e:{},hash:function(a){return[a.id,a["in"].slidr,a["in"].trans,a["in"].dir,a.out.slidr,a.out.trans,a.out.dir].join("-")},sa:function(a,b,c,d,g,f,e){return{id:a.id,"in":{el:l.get(a,c).l,slidr:c,trans:e,dir:g},out:{el:l.get(a,b).l,slidr:b,trans:f,dir:l.H(d)}}},B:function(a,b){var c=r.hash(b);r.e[c]||(r.e[c]={});r.e[c].B||(r.e[c].B=!0,c=a.d.before,"function"===typeof c&&c(b))},w:function(a,b){var c=r.hash(b);r.e[c].w||(r.e[c].w=!0,c=a.d.after,"function"===typeof c&&r.la(c,b))},
la:function(a,b){if(e.supports("animation")&&"none"!==b["in"].trans){var c=function(d){e.R[d.animationName]&&(a(b),w(b["in"].el,e.L,c,!0),r.reset(b))};w(b["in"].el,e.L,c)}else a(b),r.reset(b)},reset:function(a){a=r.hash(a);r.e[a].B=!1;r.e[a].w=!1}},l={D:"left up top right down bottom".split(" "),G:function(a){return 0<=x(l.D,a)},H:function(a){var b=l.D.length;return l.G(a)?l.D[(x(l.D,a)+b/2)%b]:null},get:function(a){for(var b=[],c=1,d;void 0!==(d=arguments[c++]);b.push(d));return G(a.U,b)},display:function(a){!a.u&&
l.get(a,a.start)&&(a.c=a.start,p.create(a),m.create(a),u.F(a,a.c,"fade"),u.A(a,a.c,"fade","in"),a.u=!0,q.controls(a,a.d.controls),a.d.breadcrumbs&&q.g(a))},q:function(a,b){return l.G(b)?l.go(a,l.get(a,a.c,b),b,b):l.ra(a,b)},ra:function(a,b){if(b&&b!==a.c&&l.get(a,b)){var c=a.C[a.c],d=a.C[b],g=c.x<d.x?"right":c.x>d.x?"left":null,d=c.y<d.y?"up":c.y>d.y?"down":null,c=t.get(a,a.c,"out",g)?g:t.get(a,a.c,"out",d)?d:null,g=t.get(a,b,"in",g)?g:t.get(a,b,"in",d)?d:null;l.go(a,b,c,g,c?null:"fade",g?null:"fade")}},
go:function(a,b,c,d,g,f){if(a.c&&b){f=f||t.get(a,b,"in",d);g=g||t.get(a,a.c,"out",c);var e=r.sa(a,a.c,b,c,d,g,f);r.B(a,e);t.apply(a,b,"in",d,f);t.apply(a,a.c,"out",c,g);r.w(a,e);a.c=b;m.update(a);return!0}return!1},find:function(a,b){for(var c=b?[]:{},d=0,g,f;g=a.a.childNodes[d];d++)(f=D(g,"data-slidr"))&&(b&&0>x(c,f)?c.push(f):f in c||(c[f]=g));return c},K:function(a,b,c,d,g,f){if(!b||b.constructor!==Array)return!1;for(var e=0,n,h,k,m,p,q,r,s;n=b[e];e++)if(!(n in d)||l.get(a,n)&&(h=b[e-1]||null,
k=b[e+1]||null,m=l.get(a,n,g),p=l.get(a,n,f),q=l.get(a,k,g),r=t.get(a,n,"out",g),s=t.get(a,n,"out",f),p&&k&&p!=k||m&&h&&m!=h||q&&q!=n||h&&r&&r!=c||k&&s&&s!=c))return!1;return!0},add:function(a,b,c,d,g,e){for(var h=0,n;n=b[h];h++){a.U[n]=a.U[n]||{};var k=l.get(a,n);k.l=d[n];b[h-1]&&(k[g]=b[h-1],t.set(a,n,g,c));b[h+1]&&(k[e]=b[h+1],t.set(a,n,e,c));u.F(a,n,c);a.start=a.start?a.start:n}a.t&&(a.u?p.create(a):l.display(a));return!0}},m={b:e.Y("control"),types:["border","corner","none"],valid:function(a){return 0<=
x(m.types,a)},create:function(a){if(a.a&&!a.controls){a.controls=h(v(y("aside",{id:m.b.id(a)}),"add","disabled"),{opacity:"0",filter:"alpha(opacity=0)","z-index":"0",visibility:"hidden","pointer-events":"none"});for(var b in a.i){var c=a.i,d=b,g=v(y("div"),"add",m.b.i,b);g&&g.setAttribute&&g.setAttribute(m.b.data,b);c[d]=g;a.controls.appendChild(a.i[b])}m.s(a);a.a.appendChild(a.controls);w(a.controls,"click",m.onclick(a))}},s:function(a){e.f(m.b.p,{position:"absolute",bottom:h(a.a,"padding-bottom")+
"px",right:h(a.a,"padding-right")+"px",padding:"10px","box-sizing":"border-box",width:"75px",height:"75px",transform:"translateZ(9998px)"},!0);e.f(m.b.p+".disabled",{transform:"translateZ(0px) !important"},!0);e.f(m.b.p+".breadcrumbs",{left:h(a.a,"padding-left")+"px",right:"auto"},!0);e.f(m.b.p+".border",{bottom:"0",right:"0",left:"0",width:"100%",height:"100%"},!0);e.f(m.b.v,{position:"absolute","pointer-events":"auto",cursor:"pointer",transition:"opacity 0.2s linear"},!0);var b={opacity:"0.05",
cursor:"auto"};e.j()&&(b.display="none");e.f(m.b.v+".disabled",b,!0);var c,d,g,f;for(c in a.i)d="left"===c||"right"===c,b="up"===c?"top":"down"===c?"bottom":c,g=d?"top":"left",f={width:d?"22px":"16px",height:d?"16px":"22px","tap-highlight-color":"rgba(0, 0, 0, 0)","touch-callout":"none","user-select":"none"},f[b]="0",f[g]="50%",f["margin-"+g]="-8px",e.f(m.b.v+"."+c,f,!0),f={width:"0",height:"0",content:'""',position:"absolute",border:"8px solid transparent"},f["border-"+l.H(b)+"-width"]="12px",f["border-"+
b+"-width"]="10px",f["border-"+l.H(b)+"-color"]=a.d.theme,f[b]="0",f[g]="50%",f["margin-"+g]="-8px",e.f(m.b.id(a,!0)+" ."+m.b.i+"."+c+":after",f,!0),f={},f[d?"height":"width"]="100%",f[g]="0",f["margin-"+g]="0",e.f(m.b.p+".border ."+m.b.i+"."+c,f,!0),d={},d[b]=h(a.a,"padding-"+b)+"px",e.f(m.b.id(a,!0)+".border ."+m.b.i+"."+c,d,!0)},onclick:function(a){return function(b){q.q(a,D(e.n(b).target,m.b.data))}},update:function(a){for(var b in a.i)v(a.i[b],q.M(a,b)?"rm":"add","disabled")}},p={b:e.Y("breadcrumbs"),
F:function(a){a.a&&!a.g&&(a.g=h(v(y("aside",{id:p.b.id(a)}),"add","disabled"),{opacity:"0",filter:"alpha(opacity=0)","z-index":"0","pointer-events":"none",visibility:"hidden"}),p.s(a),a.a.appendChild(a.g),w(a.g,"click",p.onclick(a)))},s:function(a){e.f(p.b.p,{position:"absolute",bottom:h(a.a,"padding-bottom")+"px",right:h(a.a,"padding-right")+"px",padding:"10px","box-sizing":"border-box",transform:"translateZ(9999px)"},!0);e.f(p.b.p+".disabled",{transform:"translateZ(0px) !important"},!0);e.f(p.b.v,
{padding:"0","font-size":"0","line-height":"0"},!0);e.f(p.b.v+" li",{width:"10px",height:"10px",display:"inline-block",margin:"3px","tap-highlight-color":"rgba(0, 0, 0, 0)","touch-callout":"none","user-select":"none"},!0);e.f(p.b.id(a,!0)+" ."+p.b.i+" li.normal",{"border-radius":"100%",border:"1px "+a.d.theme+" solid",cursor:"pointer","pointer-events":"auto"},!0);e.f(p.b.id(a,!0)+" ."+p.b.i+" li.active",{width:"12px",height:"12px",margin:"2px","background-color":a.d.theme},!0)},onclick:function(a){return function(b){q.q(a,
D(e.n(b).target,p.b.data))}},T:{right:{x:1,y:0},up:{x:0,y:1},left:{x:-1,y:0},down:{x:0,y:-1}},find:function(a,b,c,d,g,e){if(d){b[d]||(b[d]={x:g,y:e},g<c.x.min&&(c.x.min=g),g>c.x.max&&(c.x.max=g),e<c.y.min&&(c.y.min=e),e>c.y.max&&(c.y.max=e));d=l.get(a,d);for(var h in p.T)d[h]&&!b[d[h]]&&p.find(a,b,c,d[h],g+p.T[h].x,e+p.T[h].y)}},update:function(a,b,c){v(a.C[b].l,"in"===c?"add":"rm","active")},create:function(a){p.F(a);if(a.g){var b={},c={x:{min:0,max:0},y:{min:0,max:0}};p.find(a,b,c,a.start,0,0);
c.x.S=0-c.x.min;c.y.S=0-c.y.min;var d={},e;for(e in b)b[e].x+=c.x.S,b[e].y+=c.y.S,d[b[e].x+","+b[e].y]=e;for(var f=c.y.max-c.y.min+1,c=c.x.max-c.x.min+1;a.g.firstChild;)a.g.removeChild(a.g.firstChild);e=v(y("ul"),"add",p.b.i);for(var h=y("li"),f=f-1,n;0<=f;f--){n=e.cloneNode(!1);for(var l=0,k,m;l<c;l++){k=h.cloneNode(!1);if(m=d[l+","+f]){v(k,"add","normal",m===a.c?"active":null);var q=k;q&&q.setAttribute&&q.setAttribute(p.b.data,m);b[m].l=k}n.appendChild(k)}a.g.appendChild(n)}a.C=b}}},L={none:!0,
fade:e.supports("animation","opacity"),linear:e.supports("animation","opacity","transform"),cube:e.supports("animation","backface-visibility","opacity","transform","transform-style")};e.add.fade("slidr-fade-in","0","1");e.add.fade("slidr-fade-out","1","0");var u={F:function(a,b){var c=l.get(a,b);if(!c.qa){var d=h(c.l,"display"),d={display:"none"===d?"block":d,visibility:"hidden",position:"absolute",opacity:"0",filter:"alpha(opacity=0)","z-index":"0","pointer-events":"none","backface-visibility":"hidden",
"transform-style":"preserve-3d"};e.j()&&(d=A(d,{display:"none",visibility:"visible"}));c.qa=!0;h(c.l,d)}},ia:L,ja:{fade:void 0,linear:{"in":{left:function(a,b,c){e.add.linear(a,"in","X(-"+b,"X(0",c,"1")},right:function(a,b,c){e.add.linear(a,"in","X("+b,"X(0",c,"1")},up:function(a,b,c){e.add.linear(a,"in","Y(-"+b,"Y(0",c,"1")},down:function(a,b,c){e.add.linear(a,"in","Y("+b,"Y(0",c,"1")}},out:{left:function(a,b,c){e.add.linear(a,"out","X(0","X("+b,"1",c)},right:function(a,b,c){e.add.linear(a,"out",
"X(0","X(-"+b,"1",c)},up:function(a,b,c){e.add.linear(a,"out","Y(0","Y("+b,"1",c)},down:function(a,b,c){e.add.linear(a,"out","Y(0","Y(-"+b,"1",c)}}},cube:{"in":{left:function(a,b,c){e.add.cube(a,"Y(-9","Y(",b/2,c,"1")},right:function(a,b,c){e.add.cube(a,"Y(9","Y(",b/2,c,"1")},up:function(a,b,c){e.add.cube(a,"X(9","X(",b/2,c,"1")},down:function(a,b,c){e.add.cube(a,"X(-9","X(",b/2,c,"1")}},out:{left:function(a,b,c){e.add.cube(a,"Y(","Y(9",b/2,"1",c)},right:function(a,b,c){e.add.cube(a,"Y(","Y(-9",b/
2,"1",c)},up:function(a,b,c){e.add.cube(a,"X(","X(-9",b/2,"1",c)},down:function(a,b,c){e.add.cube(a,"X(","X(9",b/2,"1",c)}}}},name:function(a,b,c,d,e){var f=["slidr",c,d];if(("linear"===c||"cube"===c)&&e){f.push(e);a=a.d.fade?"0":"1";"0"===a&&f.push("fade");var h="up"===e||"down"===e?"h":"w";b="h"===h?k.ca(b):k.da(b);f.push(h,b);(c=G(u.ja,[c,d,e]))&&c(f.join("-"),b,a)}return f.join("-")},A:function(a,b,c,d,g,f,k,n){k={opacity:"in"===d?"1":"0",filter:"alpha(opacity="+("in"===d?"100":"0")+")","z-index":k||
("in"===d?"1":"0"),visibility:"in"===d?"visible":"hidden","pointer-events":n||("in"===d?"auto":"none")};e.j()&&(k=A(k,{display:"in"===d?"block":"none",visibility:"visible"}));f=f||l.get(a,b).l;n=a.d.timing[c];u.ia[c]&&n&&(g=u.name(a,f,c,d,g),k.animation="none"===c?"none":[g,n].join(" "));h(f,k);l.get(a,b)&&e.supports("transform")&&u.ba(a,f,d)},ba:function(a,b,c){b=b.getElementsByTagName("aside");if(b.length)for(var d=0,e,f;e=b[d];d++)if(e.getAttribute("id")){for(f=e.parentNode;!D(f,"data-slidr")&&
"body"!==(f.tagName?f.tagName.toLowerCase():null);)f=f.parentNode;"body"===(f.tagName?f.tagName.toLowerCase():null)&&(f=a.a);f=h(f,"visibility");(f="out"===c||!c&&"hidden"===f?"add":"visible"===f?"rm":null)&&v(e,f,"disabled")}}},k={k:{},ka:function(a){k.k[a.id]={src:a,V:0,Q:0,$:k.ma(a)}},ma:function(a){var b=h(a.a.cloneNode(!1),{position:"absolute",opacity:"0",filter:"alpha(opacity=0)"}),c=h(y("div"),{width:"42px",height:"42px"});b.appendChild(c);a.a.parentNode.insertBefore(b,a.a);var c=(z(b)?k.P(a.a):
0)+42,d=(z(b)?k.O(a.a):0)+42,e=h(b,"width"),f=h(b,"height"),l=h(b,"min-width"),n=h(b,"min-height"),c={width:"auto"===e||e===c||0!==l&&"auto"!=l,height:"auto"===f||f===d||0!==n&&"auto"!=n};a.a.parentNode.removeChild(b);return c},wa:function(a){return Math.max(0,h(a,"margin-left"))+Math.max(0,h(a,"margin-right"))},oa:function(a){return Math.max(0,h(a,"margin-top"))+Math.max(0,h(a,"margin-bottom"))},xa:function(a){return h(a,"padding-left")+h(a,"padding-right")},pa:function(a){return h(a,"padding-top")+
h(a,"padding-bottom")},va:function(a){return h(a,"border-left-width")+h(a,"border-right-width")},na:function(a){return h(a,"border-top-width")+h(a,"border-bottom-width")},P:function(a){return k.xa(a)+k.va(a)},O:function(a){return k.pa(a)+k.na(a)},da:function(a){var b=h(a,"width");e.j()&&"auto"===b&&a.offsetWidth&&(b=a.offsetWidth);"auto"!==b&&(b+=k.wa(a)+(z(a)?0:k.P(a)));return b},ca:function(a){var b=h(a,"height");e.j()&&"auto"===b&&a.offsetHeight&&(b=a.offsetHeight);"auto"!==b&&(b+=k.oa(a)+(z(a)?
0:k.O(a)));return b},ga:function(a,b){var c=b;"auto"!==b&&""!==b&&(c=b+(z(a)?k.P(a):0)+"px");h(a,{width:c});return b},fa:function(a,b){var c=b;"auto"!==b&&""!==b&&(c=b+(z(a)?k.O(a):0)+"px");h(a,{height:c});return b}},s={h:{m:[],ea:function(a){return 0<=x(s.h.m,a)},add:function(a){s.h.ea(a)||s.h.m.push(a)},remove:function(a){s.h.ea(a)&&s.h.m.splice(x(s.h.m,a),1)},c:function(){for(var a=s.h.m[s.h.m.length-1],b=0,c=s.h.m.length,d=s.h.m[b];b<c;b++)I(a,d)&&(a=d);return a},ua:function(a){w(a,"mouseenter",
function(a){s.h.add(e.n(a).currentTarget.id)});w(a,"mouseleave",function(a){s.h.remove(e.n(a).currentTarget.id)})}},ya:function(){w(document,"keydown",function(a){a=e.n(a);if(s.h.c()&&40>=a.which&&37<=a.which){var b=B[s.h.c()],c=null;40===a.which&&b.canSlide("down")?c="down":39===a.which&&b.canSlide("right")?c="right":38===a.which&&b.canSlide("up")?c="up":37===a.which&&b.canSlide("left")&&(c="left");c&&b.slide(c)&&e.stop(a)}})}(),ta:function(a){var b,c,d,g,f,h;w(a.a,"touchstart",function(a){a=e.n(a);
b=a.touches[0].pageX;c=a.touches[0].pageY;d=+new Date;h=f=g=0});w(a.a,"touchmove",function(a){a=e.n(a);1<a.touches.length||a.scale&&1!==a.scale||(g=a.touches[0].pageX-b,f=a.touches[0].pageY-c,h=+new Date-d,100<h&&0.25>(Math.abs(g)+Math.abs(f))/h||e.stop(a))});w(a.a,"touchend",function(b){b=e.n(b);if(250>Number(+new Date-d)){var c=Math.abs(g),h=Math.abs(f),k=20<c,l=20<h,m=0>g?"right":"left",p=0>f?"down":"up";(c=k&&l?c>h?m:p:k?m:l?p:null)&&q.q(a,c);e.stop(b)}})}},q={start:function(a,b){if(!a.t&&a.a){var c=
h(a.a,"display"),d=h(a.a,"position"),e=h(a.a,"opacity");h(a.a,{visibility:"visible",opacity:e,filter:"alpha(opacity="+100*e+")",display:"inline-block"===c||"inline"===c?"inline-block":"block",position:"static"===d?"relative":d,overflow:a.d.overflow?h(a.a,"overflow"):"hidden",transition:"height 0.05s ease-out, width 0.05s ease-out","tap-highlight-color":"rgba(0, 0, 0, 0)","touch-callout":"none"});a.start||q.add(a,a.d.direction,l.find(a,!0),a.d.transition);l.get(a,b)&&(a.start=b);l.display(a);k.ka(a);
u.ba(a,a.a);a.d.keyboard&&s.h.ua(a.a);a.d.touch&&s.ta(a);a.t=!0;m.update(a)}},M:function(a,b){return a.t&&b&&(l.G(b)?!!l.get(a,a.c,b):!!l.get(a,b))},q:function(a,b){q.M(a,b)&&l.q(a,b)},add:function(a,b,c,d,e){if(a.a){d=t.K(a,d);var f=l.find(a),h="horizontal"===b||"h"===b?"left":"up",k="horizontal"===b||"h"===b?"right":"down";l.K(a,c,d,f,h,k)||e?l.add(a,c,d,f,h,k):console.warn("[Slidr] Error adding ["+b+"] slides for ["+a.id+"].")}},r:function(a,b,c){a.t&&l.G(c)&&(q.stop(a),a.r=setInterval(function(){l.q(a,
c)},b))},stop:function(a){a.t&&a.r&&(clearInterval(a.r),a.r=null)},g:function(a){if(a.g&&a.u){var b="0"===h(a.g,"opacity")?"in":"out";u.A(a,null,"fade",b,null,a.g,"3","none");a.controls&&v(a.controls,"in"===b?"add":"rm","breadcrumbs")}},controls:function(a,b){if(a.controls&&a.u){m.valid(b)||(b=null);var c="hidden"===h(a.controls,"visibility"),d=b&&"none"!==b?"in":"out";"out"===d&&c||("border"===b?v(a.controls,"add","border"):"corner"===b&&v(a.controls,"rm","border"),u.A(a,null,"fade",d,null,a.controls,
"2","none"))}}};setInterval(function b(){var c,d,g,f,m;for(g in k.k)(d=k.k[g],c=d.src,e.j()||I(document,c.a))?"hidden"===h(c.a,"visibility")?(k.k[g].V=k.ga(c.a,0),k.k[g].Q=k.fa(c.a,0)):l.get(c,c.c)&&(f=l.get(c,c.c).l,m=k.da(f),f=k.ca(f),d.$.width&&d.V!=m&&(k.k[g].V=k.ga(c.a,m)),d.$.height&&d.Q!=f&&(k.k[g].Q=k.fa(c.a,f))):(delete k.k[g],delete B[c.id]);return b}(),250);var B={},M={after:H,before:H,breadcrumbs:!1,controls:"border",direction:"horizontal",fade:!0,keyboard:!1,overflow:!1,theme:"#fff",
timing:{},touch:!1,transition:"linear"},N={none:"none",fade:"0.4s ease-out",linear:"0.6s ease-out",cube:"1s cubic-bezier(0.15, 0.9, 0.25, 1)"};return{version:function(){return"0.4.0"},transitions:function(){return t.X.slice(0)},create:function(b,c){var d=document.getElementById(b);if(d){var e=A(M,c||{});e.timing=A(N,e.timing);B[b]=B[b]||new K(b,d,e);return B[b]}console.warn("[Slidr] Could not find element with id ["+b+"].")}}}
"object"===typeof exports?module.exports=E():"function"===typeof define&&define.amd?define(E):this.slidr=E();




jQuery(document).ready(function($) {
  
    var s = slidr.create('js-slidr', {
        	after: function(e) { console.log('in: ' + e.in.slidr); },
        	before: function(e) { console.log('out: ' + e.out.slidr); },
        	
        	direction: 'horizontal',
        	
        	fade: false,
        	keyboard: true, //*** what are these
        	overflow: false,
        	theme: '#222',
        	timing: { 'linear': '0.7s ease-out' },
        	touch: true,
        	transition: 'linear'

    })
    .add('h', ['one', 'two', 'three', 'one'])     // loops the first three slides
    .add('h', ['four', 'five', 'six', 'four'])    // loops the next three slides
    .add('v', ['one', 'four', 'one']) // moves between the two sets of slides
    //.add('v', ['two', 'five', 'two'])
    //.add('v', ['three', 'six', 'three'])// allows vertical sliding across all slides
    .start(); 

    $('#js-replace').click(function(){ 
        s.slide('down');      
    });
  
});

This awesome code ( Slidr Sets ) is write by Lewis Carey, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Lewis Carey