Cara Membuat photo slide Gallery dengan html
Halo Gan Selamat Malam
Malam Ini Adalah Malam Minggu Dimana Malam Minggu Ini Adalah Malam Minggu Terakhir 2017 Karna besok Sudah Mulai 2018 .Yeee..
Buat kalian Selamat Tahun Baru Yah Smoga Kalian Makin Sucses Amin.
Pada kesempatan kali ini saya akan memberikan tutorial cara membuat photo slide .dngan tema gallery ..dan di postingan sya yang kmare juga membahas yang sama tapi dengan hasil yang berbeda
Mungkinkalian ada yang bertanya .untuk apa ? untuk membuat gallery photo di web atau di blog karna sya menggunakan jquery css dan java scrip yang akan nemberikan efek gambar tubmnail kecil di bawahnya dan slide secara otomatis ..namun sblemunya kode ini masih murni blum saya edit .mungkin nanti kalian bisa edit edit sendiri karna sya menadapatkan kode langsung dari sumber .yang kbetulan mereka khusus mengerjakan proyek sebuah gallery dan ini adalah tampilanya
Tidak Usah Lama Lama .Di bwah Ini Adalah Kodenya Silahkan Kalian Copas ..
maaf Kodenya terlalu panjang .. untuk demo nanti saya berikan sumbernya kebetulan sumbernya memang khusus mengerjakan proyek untuk membuat gallery ..di situ banyak banget dan yang sya search adalah salah satunya .
COPY CODE
dan untuk gambar sediri terdapat dua tipe ukuran
Ukuran Gambar tumbnail : 190x90
ukuran gambar utama : 980x380
saya jelaskan sedikit gambar tumbnail .bertujuan untuk memberi efek slide yang akan mengikuti slide gambar utama Jika bingung kalian bisa comments Di bawah
Untuk pemasangan Kalian bisa pasang di template blog bisa di bagian widged dan bis juga di web pribadi Ok semoga bermanfaat ..
Sumber code: https://www.jssor.com
Malam Ini Adalah Malam Minggu Dimana Malam Minggu Ini Adalah Malam Minggu Terakhir 2017 Karna besok Sudah Mulai 2018 .Yeee..
Buat kalian Selamat Tahun Baru Yah Smoga Kalian Makin Sucses Amin.
Pada kesempatan kali ini saya akan memberikan tutorial cara membuat photo slide .dngan tema gallery ..dan di postingan sya yang kmare juga membahas yang sama tapi dengan hasil yang berbeda
Mungkinkalian ada yang bertanya .untuk apa ? untuk membuat gallery photo di web atau di blog karna sya menggunakan jquery css dan java scrip yang akan nemberikan efek gambar tubmnail kecil di bawahnya dan slide secara otomatis ..namun sblemunya kode ini masih murni blum saya edit .mungkin nanti kalian bisa edit edit sendiri karna sya menadapatkan kode langsung dari sumber .yang kbetulan mereka khusus mengerjakan proyek sebuah gallery dan ini adalah tampilanya
Tidak Usah Lama Lama .Di bwah Ini Adalah Kodenya Silahkan Kalian Copas ..
maaf Kodenya terlalu panjang .. untuk demo nanti saya berikan sumbernya kebetulan sumbernya memang khusus mengerjakan proyek untuk membuat gallery ..di situ banyak banget dan yang sya search adalah salah satunya .
COPY CODE
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title></title><br />
</head><br />
<body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'"><br />
<br />
<!-- #region Jssor Slider Begin --><br />
<!-- Generator: Jssor Slider Maker --><br />
<!-- Source: https://www.jssor.com --><br />
<!-- This is deep minimized code which works independently. --><br />
<script type="text/javascript">
!function(f,j,m,g,e,k,h){new(function(){});var c={Kc:m.PI,z:m.max,m:m.min,vb:m.ceil,ub:m.floor,A:m.abs,Ef:m.sin,Ff:m.cos,Ud:m.tan,Gf:m.atan,wb:m.pow,rd:m.random,v:m.round},d={l:function(a){return a},Nf:function(a){return-a*(a-2)},o:function(a){return a*a*a},wd:function(a){return(a-=1)*a*a+1}};var b=new function(){var i=this,Ab=/\S+/g,I=1,bb=2,eb=3,db=4,hb=5,J,s=0,l=0,t=0,X=0,A=0,L=navigator,mb=L.appName,o=L.userAgent,p=parseFloat;function Ib(){if(!J){J={Of:"ontouchstart"in f||"createTouch"in j};var a;if(L.pointerEnabled||(a=L.msPointerEnabled))J.Kd=a?"msTouchAction":"touchAction"}return J}function w(h){if(!s){s=-1;if(mb=="Microsoft Internet Explorer"&&!!f.attachEvent&&!!f.ActiveXObject){var e=o.indexOf("MSIE");s=I;t=p(o.substring(e+5,o.indexOf(";",e)));/*@cc_on X=@_jscript_version@*/;l=j.documentMode||t}else if(mb=="Netscape"&&!!f.addEventListener){var d=o.indexOf("Firefox"),b=o.indexOf("Safari"),g=o.indexOf("Chrome"),c=o.indexOf("AppleWebKit");if(d>=0){s=bb;l=p(o.substring(d+8))}else if(b>=0){var i=o.substring(0,b).lastIndexOf("/");s=g>=0?db:eb;l=p(o.substring(i+1,b))}else{var a=/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/i.exec(o);if(a){s=I;l=t=p(a[1])}}if(c>=0)A=p(o.substring(c+12))}else{var a=/(opera)(?:.*version|)[ \/]([\w.]+)/i.exec(o);if(a){s=hb;l=p(a[2])}}}return h==s}function q(){return w(I)}function yb(){return q()&&(l<6||j.compatMode=="BackCompat")}function Bb(){return w(bb)}function cb(){return w(eb)}function gb(){return w(hb)}function ub(){return cb()&&A>534&&A<535}function M(){w();return A>537||l>42||s==I&&l>=11}function wb(){return q()&&l<9}function vb(a){var b,c;return function(f){if(!b){b=e;var d=a.substr(0,1).toUpperCase()+a.substr(1);n([a].concat(["WebKit","ms","Moz","O","webkit"]),function(g,e){var b=a;if(e)b=g+d;if(f.style[b]!=h)return c=b})}return c}}function tb(b){var a;return function(c){a=a||vb(b)(c)||b;return a}}var N=tb("transform");function lb(a){return{}.toString.call(a)}var ib={};n(["Boolean","Number","String","Function","Array","Date","RegExp","Object"],function(a){ib["[object "+a+"]"]=a.toLowerCase()});function n(b,d){var a,c;if(lb(b)=="[object Array]"){for(a=0;a<b.length;a++)if(c=d(b[a],a,b))return c}else for(a in b)if(c=d(b[a],a,b))return c}function E(a){return a==g?String(a):ib[lb(a)]||"object"}function jb(a){for(var b in a)return e}function B(a){try{return E(a)=="object"&&!a.nodeType&&a!=a.window&&(!a.constructor||{}.hasOwnProperty.call(a.constructor.prototype,"isPrototypeOf"))}catch(b){}}function v(a,b){return{x:a,y:b}}function qb(b,a){setTimeout(b,a||0)}function K(b,d,c){var a=!b||b=="inherit"?"":b;n(d,function(c){var b=c.exec(a);if(b){var d=a.substr(0,b.index),e=a.substr(b.index+b[0].length+1,a.length-1);a=d+e}});a&&(c+=(!a.indexOf(" ")?"":" ")+a);return c}function sb(b,a){if(l<9)b.style.filter=a}function nb(a,b){if(a===h)a=b;return a}i.Rf=Ib;i.td=q;i.Sf=yb;i.Vf=Bb;i.Yf=cb;i.yf=M;vb("transform");i.ad=function(){return l};i.Xc=function(){return t||l};i.Re=function(){w();return A};i.Z=qb;i.W=nb;i.Xe=function(a,b){b.call(a);return D({},a)};function W(a){a.constructor===W.caller&&a.Yb&&a.Yb.apply(a,W.caller.arguments)}i.Yb=W;i.Pb=function(a){if(i.af(a))a=j.getElementById(a);return a};function u(a){return a||f.event}i.Uc=function(b){b=u(b);var a=b.target||b.srcElement||j;if(a.nodeType==3)a=i.Rc(a);return a};i.Pd=function(a){a=u(a);return{x:a.pageX||a.clientX||0,y:a.pageY||a.clientY||0}};function x(c,d,a){if(a!==h)c.style[d]=a==h?"":a;else{var b=c.currentStyle||c.style;a=b[d];if(a==""&&f.getComputedStyle){b=c.ownerDocument.defaultView.getComputedStyle(c,g);b&&(a=b.getPropertyValue(d)||b[d])}return a}}function Z(b,c,a,d){if(a===h){a=p(x(b,c));isNaN(a)&&(a=g);return a}if(a==g)a="";else d&&(a+="px");x(b,c,a)}function m(c,a){var d=a?Z:x,b;if(a&4)b=tb(c);return function(e,f){return d(e,b?b(e):c,f,a&2)}}function Db(b){if(q()&&t<9){var a=/opacity=([^)]*)/.exec(b.style.filter||"");return a?p(a[1])/100:1}else return p(b.style.opacity||"1")}function Fb(b,a,f){if(q()&&t<9){var h=b.style.filter||"",i=new RegExp(/[\s]*alpha\([^\)]*\)/g),e=c.v(100*a),d="";if(e<100||f)d="alpha(opacity="+e+") ";var g=K(h,[i],d);sb(b,g)}else b.style.opacity=a==1?"":c.v(a*100)/100}var O={T:["rotate"],jb:["rotateX"],kb:["rotateY"],gc:["skewX"],hc:["skewY"]};if(!M())O=D(O,{S:["scaleX",2],R:["scaleY",2],mb:["translateZ",1]});function P(d,a){var c="";if(a){if(q()&&l&&l<10){delete a.jb;delete a.kb;delete a.mb}b.j(a,function(d,b){var a=O[b];if(a){var e=a[1]||0;if(Q[b]!=d)c+=" "+a[0]+"("+d+(["deg","px",""])[e]+")"}});if(M()){if(a.Fb||a.Eb||a.mb!=h)c+=" translate3d("+(a.Fb||0)+"px,"+(a.Eb||0)+"px,"+(a.mb||0)+"px)";if(a.S==h)a.S=1;if(a.R==h)a.R=1;if(a.S!=1||a.R!=1)c+=" scale3d("+a.S+", "+a.R+", 1)"}}d.style[N(d)]=c}i.wf=m("transformOrigin",4);i.qf=m("backfaceVisibility",4);i.rf=m("transformStyle",4);i.sf=m("perspective",6);i.tf=m("perspectiveOrigin",4);i.uf=function(b,a){if(q()&&t<9||t<10&&yb())b.style.zoom=a==1?"":a;else{var c=N(b),f=a==1?"":"scale("+a+")",e=b.style[c],g=new RegExp(/[\s]*scale\(.*?\)/g),d=K(e,[g],f);b.style[c]=d}};i.i=function(a,d,b,c){a=i.Pb(a);if(a.addEventListener){d=="mousewheel"&&a.addEventListener("DOMMouseScroll",b,c);a.addEventListener(d,b,c)}else if(a.attachEvent){a.attachEvent("on"+d,b);c&&a.setCapture&&a.setCapture()}};i.X=function(a,c,d,b){a=i.Pb(a);if(a.removeEventListener){c=="mousewheel"&&a.removeEventListener("DOMMouseScroll",d,b);a.removeEventListener(c,d,b)}else if(a.detachEvent){a.detachEvent("on"+c,d);b&&a.releaseCapture&&a.releaseCapture()}};i.cc=function(a){a=u(a);a.preventDefault&&a.preventDefault();a.cancel=e;a.returnValue=k};i.ef=function(a){a=u(a);a.stopPropagation&&a.stopPropagation();a.cancelBubble=e};i.V=function(d,c){var a=[].slice.call(arguments,2),b=function(){var b=a.concat([].slice.call(arguments,0));return c.apply(d,b)};return b};i.Zb=function(d,c){for(var b=[],a=d.firstChild;a;a=a.nextSibling)(c||a.nodeType==1)&&b.push(a);return b};function kb(a,c,e,b){b=b||"u";for(a=a?a.firstChild:g;a;a=a.nextSibling)if(a.nodeType==1){if(H(a,b)==c)return a;if(!e){var d=kb(a,c,e,b);if(d)return d}}}i.ac=kb;function U(a,d,f,b){b=b||"u";var c=[];for(a=a?a.firstChild:g;a;a=a.nextSibling)if(a.nodeType==1){H(a,b)==d&&c.push(a);if(!f){var e=U(a,d,f,b);if(e.length)c=c.concat(e)}}return c}function fb(a,c,d){for(a=a?a.firstChild:g;a;a=a.nextSibling)if(a.nodeType==1){if(a.tagName==c)return a;if(!d){var b=fb(a,c,d);if(b)return b}}}i.Ue=fb;i.Se=function(b,a){return b.getElementsByTagName(a)};i.Vb=function(a,f,d){d=d||"u";var e;do{if(a.nodeType==1){var c=b.D(a,d);if(c&&c==nb(f,c)){e=a;break}}a=b.Rc(a)}while(a&&a!=j.body);return e};function D(){var e=arguments,d,c,b,a,g=1&e[0],f=1+g;d=e[f-1]||{};for(;f<e.length;f++)if(c=e[f])for(b in c){a=c[b];if(a!==h){a=c[b];var i=d[b];d[b]=g&&(B(i)||B(a))?D(g,{},i,a):a}}return d}i.N=D;function Y(f,g){var d={},c,a,b;for(c in f){a=f[c];b=g[c];if(a!==b){var e;if(B(a)&&B(b)){a=Y(a,b);e=!jb(a)}!e&&(d[c]=a)}}return d}i.Wc=function(a){return E(a)=="function"};i.af=function(a){return E(a)=="string"};i.id=function(a){return!isNaN(p(a))&&isFinite(a)};i.j=n;i.le=B;function S(a){return j.createElement(a)}i.Rb=function(){return S("DIV")};i.zd=function(){};function C(b,c,a){if(a==h)return b.getAttribute(c);b.setAttribute(c,a)}function H(a,b){return C(a,b)||C(a,"data-"+b)}i.P=C;i.D=H;i.Mb=function(d,b,c){var a=i.Qf(H(d,b));if(isNaN(a))a=c;return a};function y(b,a){return C(b,"class",a)||""}function pb(b){var a={};n(b,function(b){if(b!=h)a[b]=b});return a}function rb(b,a){return b.match(a||Ab)}function R(b,a){return pb(rb(b||"",a))}i.ld=pb;i.Zf=rb;function ab(b,c){var a="";n(c,function(c){a&&(a+=b);a+=c});return a}function F(a,c,b){y(a,ab(" ",D(Y(R(y(a)),R(c)),R(b))))}i.Rc=function(a){return a.parentNode};i.db=function(a){i.Kb(a,"none")};i.O=function(a,b){i.Kb(a,b?"none":"")};i.Tf=function(b,a){b.removeAttribute(a)};i.Xf=function(d,a){if(a)d.style.clip="rect("+c.v(a.c||a.J||0)+"px "+c.v(a.s)+"px "+c.v(a.q)+"px "+c.v(a.f||a.K||0)+"px)";else if(a!==h){var g=d.style.cssText,f=[new RegExp(/[\s]*clip: rect\(.*?\)[;]?/i),new RegExp(/[\s]*cliptop: .*?[;]?/i),new RegExp(/[\s]*clipright: .*?[;]?/i),new RegExp(/[\s]*clipbottom: .*?[;]?/i),new RegExp(/[\s]*clipleft: .*?[;]?/i)],e=K(g,f,"");b.sd(d,e)}};i.sb=function(){return+new Date};i.U=function(b,a){b.appendChild(a)};i.Ib=function(b,a,c){(c||a.parentNode).insertBefore(b,a)};i.Nc=function(b,a){a=a||b.parentNode;a&&a.removeChild(b)};i.If=function(a,b){n(a,function(a){i.Nc(a,b)})};i.Rd=function(a){i.If(i.Zb(a,e),a)};i.Ac=function(a,b){var c=i.Rc(a);b&1&&i.ab(a,(i.F(c)-i.F(a))/2);b&2&&i.bb(a,(i.G(c)-i.G(a))/2)};var T={c:g,s:g,q:g,f:g,L:g,I:g};i.Df=function(a){var b=i.Rb();r(b,{ic:"block",qb:i.Db(a),c:0,f:0,L:0,I:0});var d=i.Jd(a,T);i.Ib(b,a);i.U(b,a);var e=i.Jd(a,T),c={};n(d,function(b,a){if(b==e[a])c[a]=b});r(b,T);r(b,c);r(a,{c:0,f:0});return c};i.Qf=p;function V(d,c,b){var a=d.cloneNode(!c);!b&&i.Tf(a,"id");return a}i.pb=V;i.Nb=function(d,f){var a=new Image;function b(e,d){i.X(a,"load",b);i.X(a,"abort",c);i.X(a,"error",c);f&&f(a,d)}function c(a){b(a,e)}if(gb()&&l<11.6||!d)b(!d);else{i.i(a,"load",b);i.i(a,"abort",c);i.i(a,"error",c);a.src=d}};i.Af=function(d,a,e){var c=d.length+1;function b(b){c--;if(a&&b&&b.src==a.src)a=b;!c&&e&&e(a)}n(d,function(a){i.Nb(a.src,b)});b()};i.Pe=function(a,g,i,h){if(h)a=V(a);var c=U(a,g);if(!c.length)c=b.Se(a,g);for(var f=c.length-1;f>-1;f--){var d=c[f],e=V(i);y(e,y(d));b.sd(e,d.style.cssText);b.Ib(e,d);b.Nc(d)}return a};function Gb(a){var d=this,p="",r=["av","pv","ds","dn"],e=[],q,m=0,k=0,f=0;function l(){F(a,q,(e[f||k&2||k]||"")+" "+(e[m]||""));b.Cb(a,"pointer-events",f?"none":"")}function c(){m=0;l();i.X(j,"mouseup",c);i.X(j,"touchend",c);i.X(j,"touchcancel",c)}function g(a){if(f)i.cc(a);else{m=4;l();i.i(j,"mouseup",c);i.i(j,"touchend",c);i.i(j,"touchcancel",c)}}d.Ne=function(a){if(a===h)return k;k=a&2||a&1;l()};d.lc=function(a){if(a===h)return!f;f=a?0:3;l()};d.nb=a=i.Pb(a);C(a,"data-jssor-button","1");var o=b.Zf(y(a));if(o)p=o.shift();n(r,function(a){e.push(p+a)});q=ab(" ",e);e.unshift("");i.i(a,"mousedown",g);i.i(a,"touchstart",g)}i.Hc=function(a){return new Gb(a)};i.Cb=x;i.Lb=m("overflow");i.bb=m("top",2);i.ge=m("right",2);i.he=m("bottom",2);i.ab=m("left",2);i.F=m("width",2);i.G=m("height",2);i.ie=m("marginLeft",2);i.fe=m("marginTop",2);i.Db=m("position");i.Kb=m("display");i.M=m("zIndex",1);i.yc=function(b,a,c){if(a!=h)Fb(b,a,c);else return Db(b)};i.sd=function(a,b){if(b!=h)a.style.cssText=b;else return a.style.cssText};i.ke=function(b,a){if(a===h){a=x(b,"backgroundImage")||"";var c=/\burl\s*\(\s*["']?([^"'\r\n,]+)["']?\s*\)/gi.exec(a)||[];return c[1]}x(b,"backgroundImage",a?"url('"+a+"')":"")};var G;i.Me=G={a:i.yc,c:i.bb,s:i.ge,q:i.he,f:i.ab,L:i.F,I:i.G,qb:i.Db,ic:i.Kb,cb:i.M};i.Jd=function(c,b){var a={};n(b,function(d,b){if(G[b])a[b]=G[b](c)});return a};function r(f,l){var e=wb(),b=M(),d=ub(),j=N(f);function k(b,d,a){var e=b.Hb(v(-d/2,-a/2)),f=b.Hb(v(d/2,-a/2)),g=b.Hb(v(d/2,a/2)),h=b.Hb(v(-d/2,a/2));b.Hb(v(300,300));return v(c.m(e.x,f.x,g.x,h.x)+d/2,c.m(e.y,f.y,g.y,h.y)+a/2)}function a(d,a){a=a||{};var n=a.mb||0,p=(a.jb||0)%360,q=(a.kb||0)%360,u=(a.T||0)%360,l=a.S,m=a.R,f=a.hg;if(l==h)l=1;if(m==h)m=1;if(f==h)f=1;if(e){n=0;p=0;q=0;f=0}var c=new Cb(a.Fb,a.Eb,n);c.Ob(l,m,f);c.Le(a.gc,a.hc);c.jb(p);c.kb(q);c.Ke(u);if(b){c.xb(a.K,a.J);d.style[j]=c.Ie()}else if(!X||X<9){var o="",g={x:0,y:0};if(a.lb)g=k(c,a.lb,a.yb);i.fe(d,g.y);i.ie(d,g.x);o=c.Ge();var s=d.style.filter,t=new RegExp(/[\s]*progid:DXImageTransform\.Microsoft\.Matrix\([^\)]*\)/g),r=K(s,[t],o);sb(d,r)}}r=function(e,c){c=c||{};var j=c.K,k=c.J,f;n(G,function(a,b){f=c[b];f!==h&&a(e,f)});i.Xf(e,c.g);if(!b){j!=h&&i.ab(e,(c.nd||0)+j);k!=h&&i.bb(e,(c.md||0)+k)}if(c.Ee)if(d)qb(i.V(g,P,e,c));else a(e,c)};i.oc=P;if(d)i.oc=r;if(e)i.oc=a;else if(!b)a=P;i.Q=r;r(f,l)}i.oc=r;i.Q=r;function Cb(j,k,o){var d=this,b=[1,0,0,0,0,1,0,0,0,0,1,0,j||0,k||0,o||0,1],i=c.Ef,h=c.Ff,l=c.Ud;function f(a){return a*c.Kc/180}function n(a,b){return{x:a,y:b}}function m(c,e,l,m,o,r,t,u,w,z,A,C,E,b,f,k,a,g,i,n,p,q,s,v,x,y,B,D,F,d,h,j){return[c*a+e*p+l*x+m*F,c*g+e*q+l*y+m*d,c*i+e*s+l*B+m*h,c*n+e*v+l*D+m*j,o*a+r*p+t*x+u*F,o*g+r*q+t*y+u*d,o*i+r*s+t*B+u*h,o*n+r*v+t*D+u*j,w*a+z*p+A*x+C*F,w*g+z*q+A*y+C*d,w*i+z*s+A*B+C*h,w*n+z*v+A*D+C*j,E*a+b*p+f*x+k*F,E*g+b*q+f*y+k*d,E*i+b*s+f*B+k*h,E*n+b*v+f*D+k*j]}function e(c,a){return m.apply(g,(a||b).concat(c))}d.Ob=function(a,c,d){if(a!=1||c!=1||d!=1)b=e([a,0,0,0,0,c,0,0,0,0,d,0,0,0,0,1])};d.xb=function(a,c,d){b[12]+=a||0;b[13]+=c||0;b[14]+=d||0};d.jb=function(c){if(c){a=f(c);var d=h(a),g=i(a);b=e([1,0,0,0,0,d,g,0,0,-g,d,0,0,0,0,1])}};d.kb=function(c){if(c){a=f(c);var d=h(a),g=i(a);b=e([d,0,-g,0,0,1,0,0,g,0,d,0,0,0,0,1])}};d.Ke=function(c){if(c){a=f(c);var d=h(a),g=i(a);b=e([d,g,0,0,-g,d,0,0,0,0,1,0,0,0,0,1])}};d.Le=function(a,c){if(a||c){j=f(a);k=f(c);b=e([1,l(k),0,0,l(j),1,0,0,0,0,1,0,0,0,0,1])}};d.Hb=function(c){var a=e(b,[1,0,0,0,0,1,0,0,0,0,1,0,c.x,c.y,0,1]);return n(a[12],a[13])};d.Ie=function(){return"matrix3d("+b.join(",")+")"};d.Ge=function(){return"progid:DXImageTransform.Microsoft.Matrix(M11="+b[0]+", M12="+b[4]+", M21="+b[1]+", M22="+b[5]+", SizingMethod='auto expand')"}}new function(){var a=this;function b(d,g){for(var j=d[0].length,i=d.length,h=g[0].length,f=[],c=0;c<i;c++)for(var k=f[c]=[],b=0;b<h;b++){for(var e=0,a=0;a<j;a++)e+=d[c][a]*g[a][b];k[b]=e}return f}a.S=function(b,c){return a.Yc(b,c,0)};a.R=function(b,c){return a.Yc(b,0,c)};a.Yc=function(a,c,d){return b(a,[[c,0],[0,d]])};a.Hb=function(d,c){var a=b(d,[[c.x],[c.y]]);return v(a[0][0],a[1][0])}};var Q={nd:0,md:0,K:0,J:0,eb:1,S:1,R:1,T:0,jb:0,kb:0,Fb:0,Eb:0,mb:0,gc:0,hc:0};i.gd=function(c,d){var a=c||{};if(c)if(b.Wc(c))a={W:a};else if(b.Wc(c.g))a.g={W:c.g};a.W=a.W||d;if(a.g)a.g.W=a.g.W||d;return a};i.yd=function(n,j,s,t,B,C,o){var a=j;if(n){a={};for(var i in j){var D=C[i]||1,z=B[i]||[0,1],f=(s-z[0])/z[1];f=c.m(c.z(f,0),1);f=f*D;var x=c.ub(f);if(f!=x)f-=x;var k=t.W||d.l,m,E=n[i],p=j[i];if(b.id(p)){k=t[i]||k;var A=k(f);m=E+p*A}else{m=b.N({kc:{}},n[i]);var y=t[i]||{};b.j(p.kc||p,function(d,a){k=y[a]||y.W||k;var c=k(f),b=d*c;m.kc[a]=b;m[a]+=b})}a[i]=m}var w=b.j(j,function(b,a){return Q[a]!=h});w&&b.j(Q,function(c,b){if(a[b]==h&&n[b]!==h)a[b]=n[b]});if(w){if(a.eb)a.S=a.R=a.eb;a.lb=o.lb;a.yb=o.yb;if(q()&&l>=11&&(j.K||j.J)&&s!=0&&s!=1)a.T=a.T||1e-8;a.Ee=e}}if(j.g&&o.xb){var r=a.g.kc,v=(r.c||0)+(r.q||0),u=(r.f||0)+(r.s||0);a.f=(a.f||0)+u;a.c=(a.c||0)+v;a.g.f-=u;a.g.s-=u;a.g.c-=v;a.g.q-=v}if(a.g&&!a.g.c&&!a.g.f&&!a.g.J&&!a.g.K&&a.g.s==o.lb&&a.g.q==o.yb)a.g=g;return a}};function p(){var a=this,d=[];function k(a,b){d.push({rc:a,sc:b})}function j(a,c){b.j(d,function(b,e){b.rc==a&&b.sc===c&&d.splice(e,1)})}a.Sb=a.addEventListener=k;a.removeEventListener=j;a.p=function(a){var c=[].slice.call(arguments,1);b.j(d,function(b){b.rc==a&&b.sc.apply(f,c)})}}var l=function(A,E,h,J,M,L){A=A||0;var a=this,p,m,n,s,C=0,G,H,F,D,z=0,i=0,l=0,y,j,d,g,o,x,u=[],w;function O(a){d+=a;g+=a;j+=a;i+=a;l+=a;z+=a}function r(p){var f=p;if(o)if(!x&&(f>=g||f<d)||x&&f>=d)f=((f-d)%o+o)%o+d;if(!y||s||i!=f){var k=c.m(f,g);k=c.z(k,d);if(!y||s||k!=l){if(L){var m=(k-j)/(E||1);if(h.Ld)m=1-m;var n=b.yd(M,L,m,G,F,H,h);if(w)b.j(n,function(b,a){w[a]&&w[a](J,b)});else b.Q(J,n)}a.uc(l-j,k-j);var r=l,q=l=k;b.j(u,function(b,c){var a=!y&&x||f<=i?u[u.length-c-1]:b;a.fb(l-z)});i=f;y=e;a.nc(r,q)}}}function B(a,b,e){b&&a.mc(g);if(!e){d=c.m(d,a.Id()+z);g=c.z(g,a.vc()+z)}u.push(a)}var v=f.requestAnimationFrame||f.webkitRequestAnimationFrame||f.mozRequestAnimationFrame||f.msRequestAnimationFrame;if(b.Yf()&&b.ad()<7||!v)v=function(a){b.Z(a,h.ib)};function I(){if(p){var d=b.sb(),e=c.m(d-C,h.Fd),a=i+e*n;C=d;if(a*n>=m*n)a=m;r(a);if(!s&&a*n>=m*n)K(D);else v(I)}}function q(f,h,j){if(!p){p=e;s=j;D=h;f=c.z(f,d);f=c.m(f,g);m=f;n=m<i?-1:1;a.Cd();C=b.sb();v(I)}}function K(b){if(p){s=p=D=k;a.Bd();b&&b()}}a.Zd=function(a,b,c){q(a?i+a:g,b,c)};a.Dd=q;a.Gb=K;a.ff=function(a){q(a)};a.tb=function(){return i};a.hd=function(){return m};a.gb=function(){return l};a.fb=r;a.xb=function(a){r(i+a)};a.dd=function(){return p};a.Hf=function(a){o=a};a.mc=O;a.Md=function(a,b){B(a,0,b)};a.Qc=function(a){B(a,1)};a.Id=function(){return d};a.vc=function(){return g};a.nc=a.Cd=a.Bd=a.uc=b.zd;a.Vc=b.sb();h=b.N({ib:16,Fd:50},h);o=h.Oc;x=h.Oe;w=h.bf;d=j=A;g=A+E;H=h.v||{};F=h.E||{};G=b.gd(h.k)};var n={ec:"data-scale",Ic:"data-scale-ratio",Jb:"data-autocenter"},o=new function(){var a=this;a.Ab=function(c,a,e,d){(d||!b.P(c,a))&&b.P(c,a,e)};a.Lc=function(a){var c=b.Mb(a,n.Jb);b.Ac(a,c)}},r=new function(){var h=this;function g(b,a,c){c.push(a);b[a]=b[a]||[];b[a].push(c)}h.Qe=function(d){for(var e=[],a,b=0;b<d.C;b++)for(a=0;a<d.u;a++)g(e,c.vb(1e5*c.rd())%13,[b,a]);return e}},u=function(m,s,o,u,z,A){var a=this,v,h,f,y=0,x=u.Lf,q,i=8;function t(a){if(a.c)a.J=a.c;if(a.f)a.K=a.f;b.j(a,function(a){b.le(a)&&t(a)})}function j(h,f,g){var a={ib:f,n:1,Z:0,u:1,C:1,a:0,eb:0,g:0,xb:k,B:k,Ld:k,Uf:r.Qe,H:{hb:0,rb:0},k:d.l,v:{},pc:[],E:{}};b.N(a,h);if(a.C==0)a.C=c.v(a.u*g);t(a);a.k=b.gd(a.k,d.l);a.we=c.vb(a.n/a.ib);a.xe=function(c,b){c/=a.u;b/=a.C;var f=c+"x"+b;if(!a.pc[f]){a.pc[f]={L:c,I:b};for(var d=0;d<a.u;d++)for(var e=0;e<a.C;e++)a.pc[f][e+","+d]={c:e*b,s:d*c+c,q:e*b+b,f:d*c}}return a.pc[f]};if(a.wc){a.wc=j(a.wc,f,g);a.B=e}return a}function n(z,i,a,v,n,l){var y=this,t,u={},h={},m=[],f,d,r,p=a.H.hb||0,q=a.H.rb||0,g=a.xe(n,l),o=B(a),C=o.length-1,s=a.n+a.Z*C,w=v+s,j=a.B,x;w+=50;function B(a){var b=a.Uf(a);return a.Ld?b.reverse():b}y.Vd=w;y.qc=function(d){d-=v;var e=d<s;if(e||x){x=e;if(!j)d=s-d;var f=c.vb(d/a.ib);b.j(h,function(a,e){var d=c.z(f,a.m);d=c.m(d,a.length-1);if(a.kd!=d){if(!a.kd&&!j)b.O(m[e]);else d==a.z&&j&&b.db(m[e]);a.kd=d;b.Q(m[e],a[d])}})}};i=b.pb(i);A(i,0,0);b.j(o,function(i,m){b.j(i,function(G){var I=G[0],H=G[1],v=I+","+H,o=k,s=k,x=k;if(p&&H%2){if(p&3)o=!o;if(p&12)s=!s;if(p&16)x=!x}if(q&&I%2){if(q&3)o=!o;if(q&12)s=!s;if(q&16)x=!x}a.c=a.c||a.g&4;a.q=a.q||a.g&8;a.f=a.f||a.g&1;a.s=a.s||a.g&2;var E=s?a.q:a.c,B=s?a.c:a.q,D=o?a.s:a.f,C=o?a.f:a.s;a.g=E||B||D||C;r={};d={J:0,K:0,a:1,L:n,I:l};f=b.N({},d);t=b.N({},g[v]);if(a.a)d.a=2-a.a;if(a.cb){d.cb=a.cb;f.cb=0}var K=a.u*a.C>1||a.g;if(a.eb||a.T){var J=e;if(J){d.eb=a.eb?a.eb-1:1;f.eb=1;var N=a.T||0;d.T=N*360*(x?-1:1);f.T=0}}if(K){var i=t.kc={};if(a.g){var w=a.dg||1;if(E&&B){i.c=g.I/2*w;i.q=-i.c}else if(E)i.q=-g.I*w;else if(B)i.c=g.I*w;if(D&&C){i.f=g.L/2*w;i.s=-i.f}else if(D)i.s=-g.L*w;else if(C)i.f=g.L*w}r.g=t;f.g=g[v]}var L=o?1:-1,M=s?1:-1;if(a.x)d.K+=n*a.x*L;if(a.y)d.J+=l*a.y*M;b.j(d,function(a,c){if(b.id(a))if(a!=f[c])r[c]=a-f[c]});u[v]=j?f:d;var F=a.we,A=c.v(m*a.Z/a.ib);h[v]=new Array(A);h[v].m=A;h[v].z=A+F-1;for(var z=0;z<=F;z++){var y=b.yd(f,r,z/F,a.k,a.E,a.v,{xb:a.xb,lb:n,yb:l});y.cb=y.cb||1;h[v].push(y)}})});o.reverse();b.j(o,function(a){b.j(a,function(c){var f=c[0],e=c[1],d=f+","+e,a=i;if(e||f)a=b.pb(i);b.Q(a,u[d]);b.Lb(a,"hidden");b.Db(a,"absolute");z.Ce(a);m[d]=a;b.O(a,!j)})})}function w(){var a=this,b=0;l.call(a,0,v);a.nc=function(c,a){if(a-b>i){b=a;f&&f.qc(a);h&&h.qc(a)}};a.vd=q}a.je=function(){var a=0,b=u.Gc,d=b.length;if(x)a=y++%d;else a=c.ub(c.rd()*d);b[a]&&(b[a].zb=a);return b[a]};a.Cf=function(x,y,k,l,b,t){a.Bb();q=b;b=j(b,i,t);var g=l.od,e=k.od;g["no-image"]=!l.bc;e["no-image"]=!k.bc;var p=g,r=e,w=b,d=b.wc||j({},i,t);if(!b.B){p=e;r=g}var u=d.mc||0;h=new n(m,r,d,c.z(u-d.ib,0),s,o);f=new n(m,p,w,c.z(d.ib-u,0),s,o);h.qc(0);f.qc(0);v=c.z(h.Vd,f.Vd);a.zb=x};a.Bb=function(){m.Bb();h=g;f=g};a.Pf=function(){var a=g;if(f)a=new w;return a};if(z&&b.Re()<537)i=16;p.call(a);l.call(a,-1e7,1e7)},q={Jc:1};var v=function(a,d,i,y,x,w){var c=this;p.call(c);var j,h,f,l;b.F(a);b.G(a);var s,r;function m(a){c.p(q.Jc,a,e)}function v(c){b.O(a,c);b.O(d,c)}function u(){s.lc(i.Xb||!j.Ye(h));r.lc(i.Xb||!j.Ze(h))}c.Fc=function(c,a,b){h=a;!b&&u()};c.Ec=v;var t;c.Dc=function(){h=0;if(!t){b.i(a,"click",b.V(g,m,-l));b.i(d,"click",b.V(g,m,l));s=b.Hc(a);r=b.Hc(d);t=e}};c.fc=f=b.N({of:1},i);l=f.of;j=w;if(f.Ob==k){o.Ab(a,n.ec,1);o.Ab(d,n.ec,1)}if(f.ob){o.Ab(a,n.Jb,f.ob);o.Ab(d,n.Jb,f.ob)}o.Lc(a);o.Lc(d)},s=function(f,E){var j=this,x,B,s,a,A=[],z,y,d,l,m,w,v,r,t,h,u;p.call(j);f=b.Pb(f);function D(n,f){var h=this,c,m,l;function o(){m.Ne(s==f)}function i(g){if(g||!t.cf()){var c=d-f%d,a=t.Td((f+c)/d-1),b=a*d+d-c;if(a<0)b+=x%d;if(a>=B)b-=x%d;j.p(q.Jc,b,k,e)}}h.zb=f;h.Sd=o;l=n.df||n.bc||b.Rb();h.dc=c=b.Pe(u,"thumbnailtemplate",l,e);m=b.Hc(c);a.Bc&1&&b.i(c,"click",b.V(g,i,0));a.Bc&2&&b.i(c,"mouseenter",b.V(g,i,1))}j.Fc=function(a,f,e){if(a!=s){var b=s;s=a;b!=-1&&A[b].Sd();A[a].Sd()}!e&&t.vf(t.Td(c.ub(a/d)))};j.Ec=function(a){b.O(f,a)};var C;j.Dc=function(G,H){if(!C){x=G;B=c.vb(x/d);s=-1;var g=a.Tb&1,p=w+(w+l)*(d-1)*(1-g),o=v+(v+m)*(d-1)*g,u=(g?c.z:c.m)(z,p),q=(g?c.m:c.z)(y,o);r=c.vb((z-l)/(w+l)*g+(y-m)/(v+m)*(1-g));r=c.m(r,B);var E=p+(p+l)*(r-1)*g,I=o+(o+m)*(r-1)*(1-g);u=c.m(u,E);q=c.m(q,I);b.Db(h,"absolute");b.Lb(h,"hidden");b.F(h,u);b.G(h,q);b.Ac(h,3);var n=[];b.j(H,function(k,f){var i=new D(k,f),e=i.dc,a=c.ub(f/d),j=f%d;b.ab(e,(w+l)*j*(1-g));b.bb(e,(v+m)*j*g);if(!n[a]){n[a]=b.Rb();b.U(h,n[a])}b.U(n[a],e);A.push(i)});var F=b.N({Qb:0,Xd:k,kf:p,pf:o,Ed:l*g+m*(1-g),Nd:12,bd:200,cd:1,u:r,Zc:a.Tb,jd:a.ag||a.fg?0:a.Tb},a);t=new i(f,F);j.Jf=t.Jf;C=e}};j.fc=a=b.N({zc:0,Mc:0,Tb:1,Bc:1},E);z=b.F(f);y=b.G(f);h=b.ac(f,"slides",e);u=b.ac(h,"prototype");w=b.F(u);v=b.G(u);b.Nc(u,h);d=a.C||1;l=a.zc;m=a.Mc;a.Ob==k&&o.Ab(f,n.ec,1);a.ob&=a.Tb;a.ob&&o.Ab(f,n.Jb,a.ob);o.Lc(f)};function t(e,d,c){var a=this;l.call(a,0,c);a.pd=b.zd;a.xd=0;a.ed=c}var i=(f.module||{}).exports=function(){var a=this;b.Xe(a,p);var Ob="data-jssor-slider",bc="data-jssor-thumb",v,m,ab,ob,eb,yb,db,W,K,R,Db,Vb=1,nc=1,dc=1,ec={},y,X,Gb,Jb,Ib,pb,Ab,zb,kb,r=-1,Rb,o,O,M,G,vb,wb,w,S,L,bb,z,Y,ub,gb=[],jc,lc,fc,Wb,Hc,u,lb,J,hc,tb,Pb,ic,Q,Lb=0,E=0,P=Number.MAX_VALUE,H=Number.MIN_VALUE,kc,D,mb,U,N=1,cb,B,fb,Sb=0,Tb=0,T,qb,rb,nb,x,ib,A,Hb,hb=[],Fb=b.Rf(),sb=Fb.Of,C=[],F,V,I,Nb,ac,Z;function wc(d,k,o){var l=this,h={c:2,s:1,q:2,f:1},m={c:"top",s:"right",q:"bottom",f:"left"},g,a,f,i,j={};l.nb=d;l.jc=function(q,p,t){var l,s=q,r=p;if(!f){f=b.Df(d);g=d.parentNode;i={Ob:b.Mb(d,n.ec,1),ob:b.Mb(d,n.Jb)};b.j(m,function(c,a){j[a]=b.Mb(d,"data-scale-"+c,1)});a=d;if(k){a=b.pb(g,e);b.Q(a,{c:0,f:0});b.U(a,d);b.U(g,a)}}if(o){l=c.z(q,p);if(k)if(t>0&&t<1){var v=c.m(q,p);l=c.m(l/v,1/(1-t))*v}}else s=r=l=c.wb(K<R?p:q,i.Ob);b.uf(a,l);b.P(a,n.Ic,l);b.F(g,f.L*s);b.G(g,f.I*r);var u=b.td()&&b.Xc()<9||b.Xc()<10&&b.Sf()?l:1,w=(s-u)*f.L/2,x=(r-u)*f.I/2;b.ab(a,w);b.bb(a,x);b.j(f,function(d,a){if(h[a]&&d){var e=(h[a]&1)*c.wb(q,j[a])*d+(h[a]&2)*c.wb(p,j[a])*d/2;b.Me[a](g,e)}});b.Ac(g,i.ob)}}function Gc(){var b=this;l.call(b,-1e8,2e8);b.Bf=function(){var a=b.gb();a=s(a);var d=c.v(a),g=d,f=a-c.ub(a),e=cc(a);return{zb:g,xf:d,qb:f,ic:a,De:e}};b.nc=function(d,b){var g=s(b);if(c.A(b-d)>1e-5){var f=c.ub(b);if(f!=b&&b>d&&(D&1||b>E))f++;mc(f,g,e)}a.p(i.ce,g,s(d),b,d)}}function Fc(){var a=this;l.call(a,0,0,{Oc:o});b.j(C,function(b){D&1&&b.Hf(o);a.Qc(b);b.mc(Q/w)})}function Ec(){var a=this,b=Hb.nb;l.call(a,-1,2,{k:d.l,bf:{qb:Ub},Oc:o},b,{qb:1},{qb:-2});a.dc=b}function xc(o,n){var b=this,d,f,h,j,c;l.call(b,-1e8,2e8,{Fd:100});b.Cd=function(){cb=e;fb=g;a.p(i.be,s(x.tb()),x.tb())};b.Bd=function(){cb=k;j=k;var b=x.Bf();a.p(i.de,s(x.tb()),x.tb());if(!B){Ic(b.xf,r);(!b.qb||b.De)&&mc(r,b.ic)}};b.nc=function(g,e){var a;if(j)a=c;else{a=f;if(h){var b=e/h;a=m.Od(b)*(f-d)+d}}x.fb(a)};b.Tc=function(a,e,c,g){d=a;f=e;h=c;x.fb(a);b.fb(0);b.Dd(c,g)};b.ee=function(a){j=e;c=a;b.Zd(a,g,e)};b.ae=function(a){c=a};x=new Gc;x.Md(o);x.Md(n)}function yc(){var c=this,a=pc();b.M(a,0);b.Cb(a,"pointerEvents","none");c.nb=a;c.Ce=function(c){b.U(a,c);b.O(a)};c.Bb=function(){b.db(a);b.Rd(a)}}function Dc(n,f){var d=this,t,E,v,j,x=[],J,y,Q,z,N,H,B,h,w,q;l.call(d,-S,S+1,{});function G(a){t&&t.pd();P(n,a,0);H=e;t=new eb.Y(n,eb,b.Mb(n,"idle",hc),!u);t.fb(0)}function V(){t.Vc<eb.Vc&&G()}function K(p,r,o){if(!z){z=e;if(j&&o){var g=o.width,c=o.height,n=g,l=c;if(g&&c&&m.Wb){if(m.Wb&3&&(!(m.Wb&4)||g>O||c>M)){var h=k,q=O/M*c/g;if(m.Wb&1)h=q>1;else if(m.Wb&2)h=q<1;n=h?g*M/c:O;l=h?M:c*O/g}b.F(j,n);b.G(j,l);b.bb(j,(M-l)/2);b.ab(j,(O-n)/2)}b.Db(j,"absolute");a.p(i.Je,f)}}b.db(r);p&&p(d)}function T(g,b,c,e){if(e==fb&&r==f&&u)if(!Hc){var a=s(g);F.Cf(a,f,b,d,c,M/O);b.He();ib.mc(a-ib.Id()-1);ib.fb(a);A.Tc(a,a,0)}}function Y(b){if(b==fb&&r==f){if(!h){var a=g;if(F)if(F.zb==f)a=F.Pf();else F.Bb();V();h=new Cc(n,f,a,t);h.fd(q)}!h.dd()&&h.Pc()}}function I(a,e,k){if(a==f){if(a!=e)C[e]&&C[e].Ad();else!k&&h&&h.Ae();q&&q.lc();var l=fb=b.sb();d.Nb(b.V(g,Y,l))}else{var j=c.m(f,a),i=c.z(f,a),p=c.m(i-j,j+o-i),n=S+m.ze-1;(!N||p<=n)&&d.Nb()}}function Z(){if(r==f&&h){h.Gb();q&&q.ye();q&&q.ve();h.Qd()}}function ab(){r==f&&h&&h.Gb()}function W(b){!U&&a.p(i.se,f,b)}function L(){q=w.pInstance;h&&h.fd(q)}d.Nb=function(d,c){c=c||v;if(x.length&&!z){b.O(c);if(!Q){Q=e;a.p(i.re,f);b.j(x,function(a){if(!b.P(a,"src")){a.src=b.D(a,"src2")||"";b.Kb(a,a["display-origin"])}})}b.Af(x,j,b.V(g,K,d,c))}else K(d,c)};d.qe=function(){if(o==1){d.Ad();I(f,f)}else{var a;if(F)a=F.je(o);if(a){var h=fb=b.sb(),c=f+lb,e=C[s(c)];return e.Nb(b.V(g,T,c,e,a,h),v)}else Cb(lb)}};d.Sc=function(){I(f,f,e)};d.Ad=function(){q&&q.ye();q&&q.ve();d.Hd();h&&h.ne();h=g;G()};d.He=function(){b.db(n)};d.Hd=function(){b.O(n)};d.Mf=function(){q&&q.lc()};function P(a,f,c,h){if(b.P(a,Ob))return;if(!H){if(a.tagName=="IMG"){x.push(a);if(!b.P(a,"src")){N=e;a["display-origin"]=b.Kb(a);b.db(a)}}var d=b.ke(a);if(d){var g=new Image;b.D(g,"src2",d);x.push(g)}c&&b.M(a,(b.M(a)||0)+1)}var i=b.Zb(a);b.j(i,function(a){var d=a.tagName,g=b.D(a,"u");if(g=="player"&&!w){w=a;if(w.pInstance)L();else b.i(w,"dataavailable",L)}if(g=="caption"){if(f){b.wf(a,b.D(a,"to"));b.qf(a,b.D(a,"bf"));B&&b.D(a,"3d")&&b.rf(a,"preserve-3d")}}else if(!H&&!c&&!j){if(d=="A"){if(b.D(a,"u")=="image")j=b.Ue(a,"IMG");else j=b.ac(a,"image",e);if(j){J=a;b.Q(J,kb);y=b.pb(J,e);b.yc(y,0);b.Cb(y,"backgroundColor","#000")}}else if(d=="IMG"&&b.D(a,"u")=="image")j=a;if(j){j.border=0;b.Q(j,kb)}}P(a,f,c+1,h)})}d.uc=function(c,b){var a=S-b;Ub(E,a)};d.zb=f;p.call(d);B=b.D(n,"p");b.sf(n,B);b.tf(n,b.D(n,"po"));var D=b.ac(n,"thumb",e);if(D){d.df=b.pb(D);b.db(D)}b.O(n);v=b.pb(X);b.M(v,1e3);b.i(n,"click",W);G(e);d.bc=j;d.ud=y;d.od=n;d.dc=E=n;b.U(E,v);a.Sb(203,I);a.Sb(28,ab);a.Sb(24,Z)}function Cc(z,g,p,q){var c=this,n=0,v=0,h,j,f,d,m,t,s,o=C[g];l.call(c,0,0);function w(){b.Rd(V);Wb&&m&&o.ud&&b.U(V,o.ud);b.O(V,!m&&o.bc)}function x(){c.Pc()}function y(a){s=a;c.Gb();c.Pc()}c.Pc=function(){var b=c.gb();if(!B&&!cb&&!s&&r==g){if(!b){if(h&&!m){m=e;c.Qd(e);a.p(i.We,g,n,v,h,d)}w()}var k,p=i.Wd;if(b!=d)if(b==f)k=d;else if(b==j)k=f;else if(!b)k=j;else k=c.hd();a.p(p,g,b,n,j,f,d);var l=u&&(!J||N);if(b==d)(f!=d&&!(J&12)||l)&&o.qe();else(l||b!=f)&&c.Dd(k,x)}};c.Ae=function(){f==d&&f==c.gb()&&c.fb(j)};c.ne=function(){F&&F.zb==g&&F.Bb();var b=c.gb();b<d&&a.p(i.Wd,g,-b-1,n,j,f,d)};c.Qd=function(a){p&&b.Lb(bb,a&&p.vd.gg?"":"hidden")};c.uc=function(c,b){if(m&&b>=h){m=k;w();o.Hd();F.Bb();a.p(i.hf,g,n,v,h,d)}a.p(i.jf,g,b,n,j,f,d)};c.fd=function(a){if(a&&!t){t=a;a.Sb($JssorPlayer$.zf,y)}};p&&c.Qc(p);h=c.vc();c.Qc(q);j=h+q.xd;d=c.vc();f=u?h+q.ed:d}function Qb(a,c,d){b.ab(a,c);b.bb(a,d)}function Ub(c,b){var a=z>0?z:ab,d=(vb*b+Lb)*(a&1),e=(wb*b+Lb)*(a>>1&1);Qb(c,d,e)}function Mb(a){if(!(D&1))a=c.m(P,c.z(a,H));return a}function cc(a){return!(D&1)&&(a-H<.0001||P-a<.0001)}function gc(){Nb=cb;ac=A.hd();I=x.tb()}function Yb(){gc();if(B||!N&&J&12){A.Gb();a.p(i.lf)}}function Xb(g){if(!B&&(N||!(J&12))&&!A.dd()){var b=x.tb(),a=I,f=0;if(g&&c.A(T)>=m.Nd){a=b;f=rb}if(cc(b)){if(!g||U)a=c.v(a)}else a=c.vb(a);a=Mb(a+f);if(!(D&1)){if(P-a<.5)a=P;if(a-H<.5)a=H}var e=c.A(a-b);if(e<1&&m.Od!=d.l)e=1-c.wb(1-e,5);if(!U&&Nb)A.ff(ac);else if(b==a){Rb.Mf();Rb.Sc()}else A.Tc(b,a,e*tb)}}function Zb(a){!b.Vb(b.Uc(a),"nodrag")&&b.cc(a)}function Ac(a){qc(a,1)}function qc(c,f){var d=b.Uc(c);ub=k;var l=b.Vb(d,"1",bc);if((!l||l===v)&&!Y&&(!f||c.touches.length==1)){ub=b.Vb(d,"nodrag")||!mb||!Bc();var m=b.Vb(d,h,n.Ic);if(m)dc=b.P(m,n.Ic);if(f){var p=c.touches[0];Sb=p.clientX;Tb=p.clientY}else{var o=b.Pd(c);Sb=o.x;Tb=o.y}B=e;fb=g;b.i(j,f?"touchmove":"mousemove",Eb);b.sb();U=0;Yb();if(!Nb)z=0;T=0;qb=0;rb=0;a.p(i.mf,s(I),I,c)}}function Eb(g){if(B){var a;if(g.type!="mousemove")if(g.touches.length==1){var p=g.touches[0];a={x:p.clientX,y:p.clientY}}else jb();else a=b.Pd(g);if(a){var d=a.x-Sb,f=a.y-Tb;if(z||c.A(d)>1.5||c.A(f)>1.5){if(c.ub(I)!=I)z=z||ab&Y;if((d||f)&&!z){if(Y==3)if(c.A(f)>c.A(d))z=2;else z=1;else z=Y;if(sb&&z==1&&c.A(f)>c.A(d)*2.4)ub=e}var n=f,i=wb;if(z==1){n=d;i=vb}if(T-qb<-1.5)rb=0;else if(T-qb>1.5)rb=-1;qb=T;T=n;Z=I-T/i/dc;if(!(D&1)){var l=0,j=[-I+E,0,I-o+L-G/w-E];b.j(j,function(b,d){if(b>0){var a=c.wb(b,1/1.6);a=c.Ud(a*c.Kc/2);l=(a-b)*(d-1)}});var h=l+Z,m=k;j=[-h+E,0,h-o+L+G/w-E];b.j(j,function(a,b){if(a>0){a=c.m(a,i);a=c.Gf(a)*2/c.Kc;a=c.wb(a,1.6);Z=a*(b-1)+E;if(b)Z+=o-L-G/w;m=e}});if(!m)Z=h}if(T&&z&&!ub){b.cc(g);if(!cb)A.ee(Z);else A.ae(Z)}}}}}function jb(){zc();if(B){U=T;b.sb();b.X(j,"mousemove",Eb);b.X(j,"touchmove",Eb);U&&u&8&&(u=0);A.Gb();B=k;var c=x.tb();a.p(i.nf,s(c),c,s(I),I);J&12&&gc();Xb(e)}}function vc(c){var a=b.Uc(c),d=b.Vb(a,"1",Ob);if(v===d)if(U){b.ef(c);while(a&&v!==a){(a.tagName=="A"||b.P(a,"data-jssor-button"))&&b.cc(c);a=a.parentNode}}else u&4&&(u=0)}function rc(d){if(d!=r){var b=nb.gb(),a=Mb(d),e=c.v(s(a));if(b-a<.5)a=b;C[r];r=e;Rb=C[r];x.fb(a)}}function Ic(b,c){z=0;rc(b);if(u&2&&(lb>0&&r==o-1||lb<0&&!r))u=0;a.p(i.gf,r,c)}function mc(a,d,e){if(!(D&1)){a=c.z(0,a);a=c.m(a,o-L+E);a=c.v(a)}a=s(a);b.j(gb,function(b){b.Fc(a,d,e)})}function Bc(){var b=i.Yd||0,a=mb;i.Yd|=a;return Y=a&~b}function zc(){if(Y){i.Yd&=~mb;Y=0}}function pc(){var a=b.Rb();b.Q(a,kb);return a}function s(b,a){a=a||o||1;return(b%a+a)%a}function Kb(c,a,b){u&8&&(u=0);xb(c,tb,a,b)}function Bb(){b.j(gb,function(a){a.Ec(a.fc.eg<=N)})}function tc(){if(!N){N=1;Bb();if(!B){J&12&&Xb();J&3&&C[r]&&C[r].Sc()}}a.p(i.Ve)}function sc(){if(N){N=0;Bb();B||!(J&12)||Yb()}a.p(i.Te)}function uc(){b.j(hb,function(a){b.Q(a,kb);b.Lb(a,"hidden");b.db(a)});b.Q(X,kb)}function Cb(b,a){xb(b,a,e)}function xb(l,f,n,p){if(!B&&(N||!(J&12))||m.Xd){cb=e;B=k;A.Gb();if(f==h)f=tb;var b=s(nb.gb()),d=l;if(n){d=b+l;d=c.v(d)}var a=d;if(!(D&1)){if(p)a=s(a);else if(D&2&&(a<0&&c.A(b-H)<.0001||a>o-L&&c.A(b-P)<.0001))a=a<0?P:H;a=Mb(a);if(P-a<.5)a=P;if(a-H<.5)a=H}var j=(a-b)%o;a=b+j;var g=b==a?0:f*c.A(j),i=1;if(S>1)i=(ab&1?Ab:zb)/w;g=c.m(g,f*i*1.5);A.Tc(b,a,g||1)}}a.Qb=function(a){if(a==h)return u;if(a!=u){u=a;u&&C[r]&&C[r].Sc()}};a.cf=function(){return U};a.lb=function(){return K};a.yb=function(){return R};a.Wf=function(b){if(b==h)return Db||K;a.jc(b,b/K*R)};a.jc=function(c,a,d){b.F(v,c);b.G(v,a);Vb=c/K;nc=a/R;b.j(ec,function(a){a.jc(Vb,nc,d)});if(!Db){b.Ib(bb,y);b.bb(bb,0);b.ab(bb,0)}Db=c};a.Ye=function(a){return c.A(a-H)<.0001};a.Ze=function(a){return c.A(a-P)<.0001};a.vf=xb;a.Zd=function(){a.Qb(u||1)};a.Td=function(a){a=s(a);if(D&1){var e=Q/w,b=s(nb.gb()),d=s(a-b+e),f=s(c.A(a-b));if(d>=S){if(f>o/2)if(a>b)a-=o;else a+=o}else if(a>b&&d<e)a-=o;else if(a<b&&d>e)a+=o}return a};a.Yb=function(B,n){a.nb=v=b.Pb(B);K=b.F(v);R=b.G(v);m=b.N({Wb:0,ze:1,Ub:1,Cc:0,Qb:0,Xb:1,xc:e,Xd:e,me:1,qd:3e3,cd:1,bd:500,Od:d.Nf,Nd:20,Ed:0,Fe:1,Zc:1,jd:1},n);m.xc=m.xc&&b.yf();if(m.Be!=h)m.qd=m.Be;if(m.ue!=h)m.u=m.ue;if(m.te!=h)m.tc=m.te;ab=m.Zc&3;ob=m.Kf;eb=b.N({Y:t},m.cg);yb=m.bg;db=m.pe;W=m.oe;!m.Fe;var p=b.Zb(v);b.j(p,function(a,d){var c=b.D(a,"u");if(c=="loading")X=a;else{if(c=="slides")y=a;if(c=="navigator")Gb=a;if(c=="arrowleft")Jb=a;if(c=="arrowright")Ib=a;if(c=="thumbnavigator")pb=a;if(a.tagName!="STYLE"&&a.tagName!="SCRIPT")ec[c||d]=new wc(a,c=="slides",b.ld(["slides","thumbnavigator"])[c])}});X=X||b.Rb(j);Ab=b.F(y);zb=b.G(y);O=m.kf||Ab;M=m.pf||zb;kb={L:O,I:M,c:0,f:0,ic:"block",qb:"absolute"};G=m.Ed;vb=O+G;wb=M+G;w=ab&1?vb:wb;var i=ab&1?Ab:zb;lb=m.me;J=m.cd;hc=m.qd;tb=m.bd;Hb=new yc;if(m.xc&&(!b.Vf()||sb))Qb=function(a,c,d){b.oc(a,{Fb:c,Eb:d})};u=m.Qb&63;a.fc=n;b.P(v,Ob,"1");b.M(y,b.M(y)||0);b.Db(y,"absolute");bb=b.pb(y,e);b.Ib(bb,y);ib=new Ec;b.U(bb,ib.dc);b.Lb(y,"hidden");J&=sb?10:5;var r=b.Zb(y),I=b.ld(["DIV","A","LI"]);b.j(r,function(a){I[a.tagName.toUpperCase()]&&!b.D(a,"u")&&hb.push(a);b.M(a,(b.M(a)||0)+1)});V=pc();b.Cb(V,"backgroundColor","#000");b.yc(V,0);b.M(V,0);b.Ib(V,y.firstChild,y);o=hb.length;if(o){uc();Q=m.tc;if(Q==h)Q=(i-w+G)/2;L=i/w;S=c.m(o,m.u||o,c.vb(L));kc=S<o;D=kc?m.Xb:0;if(o*w-G<=i){L=o-G/w;Q=(i-w+G)/2;Lb=(i-w*o+G)/2}if(ob){Wb=ob.ig;Pb=ob.Y;ic=!Q&&S==1&&o>1&&Pb&&(!b.td()||b.ad()>=9)}if(!(D&1)){E=Q/w;if(E>o-1){E=o-1;Q=E*w}H=E;P=H+o-L-G/w}mb=(S>1||Q?ab:-1)&m.jd;Fb.Kd&&b.Cb(y,Fb.Kd,([g,"pan-y","pan-x","none"])[mb]||"");if(ic)F=new Pb(Hb,O,M,ob,sb,Qb);for(var k=0;k<hb.length;k++){var x=hb[k],z=new Dc(x,k);C.push(z)}b.db(X);nb=new Fc;A=new xc(nb,ib);b.i(v,"click",vc,e);b.i(v,"mouseleave",tc);b.i(v,"mouseenter",sc);b.i(v,"mousedown",qc);b.i(v,"touchstart",Ac);b.i(v,"dragstart",Zb);b.i(v,"selectstart",Zb);b.i(f,"mouseup",jb);b.i(j,"mouseup",jb);b.i(j,"touchend",jb);b.i(j,"touchcancel",jb);b.i(f,"blur",jb);if(Gb&&yb){jc=new yb.Y(Gb,yb,K,R);gb.push(jc)}if(db&&Jb&&Ib){db.Xb=D;lc=new db.Y(Jb,Ib,db,K,R,a);gb.push(lc)}if(pb&&W){W.Cc=m.Cc;W.Ub=W.Ub||0;fc=new W.Y(pb,W);!W.ag&&b.P(pb,bc,"1");gb.push(fc)}b.j(gb,function(a){a.Dc(o,C,X);a.Sb(q.Jc,Kb)});b.Cb(v,"visibility","visible");a.jc(K,R);Bb();m.Ub&&b.i(j,"keydown",function(a){if(a.keyCode==37)Kb(-m.Ub,e);else a.keyCode==39&&Kb(m.Ub,e)});var l=m.Cc;l=s(l);xb(l,0)}};b.Yb(a)};i.se=21;i.mf=22;i.nf=23;i.be=24;i.de=25;i.re=26;i.Je=27;i.lf=28;i.Te=31;i.Ve=32;i.ce=202;i.gf=203;i.We=206;i.hf=207;i.jf=208;i.Wd=209;jssor_1_slider_init=function(){var g=[{n:800,x:.3,E:{f:[.3,.7]},k:{f:d.o,a:d.l},a:2},{n:800,x:-.3,B:e,k:{f:d.o,a:d.l},a:2},{n:800,x:-.3,E:{f:[.3,.7]},k:{f:d.o,a:d.l},a:2},{n:800,x:.3,B:e,k:{f:d.o,a:d.l},a:2},{n:800,y:.3,E:{c:[.3,.7]},k:{c:d.o,a:d.l},a:2},{n:800,y:-.3,B:e,k:{c:d.o,a:d.l},a:2},{n:800,y:-.3,E:{c:[.3,.7]},k:{c:d.o,a:d.l},a:2},{n:800,y:.3,B:e,k:{c:d.o,a:d.l},a:2},{n:800,x:.3,u:2,E:{f:[.3,.7]},H:{hb:3},k:{f:d.o,a:d.l},a:2},{n:800,x:.3,u:2,B:e,H:{hb:3},k:{f:d.o,a:d.l},a:2},{n:800,y:.3,C:2,E:{c:[.3,.7]},H:{rb:12},k:{c:d.o,a:d.l},a:2},{n:800,y:.3,C:2,B:e,H:{rb:12},k:{c:d.o,a:d.l},a:2},{n:800,y:.3,u:2,E:{c:[.3,.7]},H:{hb:12},k:{c:d.o,a:d.l},a:2},{n:800,y:-.3,u:2,B:e,H:{hb:12},k:{c:d.o,a:d.l},a:2},{n:800,x:.3,C:2,E:{f:[.3,.7]},H:{rb:3},k:{f:d.o,a:d.l},a:2},{n:800,x:-.3,C:2,B:e,H:{rb:3},k:{f:d.o,a:d.l},a:2},{n:800,x:.3,y:.3,u:2,C:2,E:{f:[.3,.7],c:[.3,.7]},H:{hb:3,rb:12},k:{f:d.o,c:d.o,a:d.l},a:2},{n:800,x:.3,y:.3,u:2,C:2,E:{f:[.3,.7],c:[.3,.7]},B:e,H:{hb:3,rb:12},k:{f:d.o,c:d.o,a:d.l},a:2},{n:800,Z:20,g:3,k:{g:d.o,a:d.l},a:2},{n:800,Z:20,g:3,B:e,k:{g:d.wd,a:d.l},a:2},{n:800,Z:20,g:12,k:{g:d.o,a:d.l},a:2},{n:800,Z:20,g:12,B:e,k:{g:d.wd,a:d.l},a:2}],h={Qb:1,u:1,tc:0,Kf:{Y:u,Gc:g,Lf:1},pe:{Y:v},oe:{Y:s,u:5,zc:5,Mc:5,tc:390}},c=new i("jssor_1",h),j=980;function a(){var d=c.nb.parentNode,b=d.clientWidth;if(b){var e=m.min(j||b,b);c.Wf(e)}else f.setTimeout(a,30)}a();b.i(f,"load",a);b.i(f,"resize",a);b.i(f,"orientationchange",a)}}(window,document,Math,null,true,false)
</script>
<style>
.jssorl-009-spin img{animation-name:jssorl-009-spin;animation-duration:1.6s;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes jssorl-009-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}.jssora106{display:block;position:absolute;cursor:pointer}.jssora106 .c{fill:#fff;opacity:.3}.jssora106 .a{fill:none;stroke:#000;stroke-width:350;stroke-miterlimit:10}.jssora106:hover .c{opacity:.5}.jssora106:hover .a{opacity:.8}.jssora106.jssora106dn .c{opacity:.2}.jssora106.jssora106dn .a{opacity:1}.jssora106.jssora106ds{opacity:.3;pointer-events:none}.jssort101 .p{position:absolute;top:0;left:0;box-sizing:border-box;background:#000}.jssort101 .p .cv{position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1}.jssort101 .a{fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden}.jssort101 .p:hover .cv,.jssort101 .p.pdn .cv{border:none;border-color:transparent}.jssort101 .p:hover{padding:2px}.jssort101 .p:hover .cv{background-color:rgba(0,0,0,6);opacity:.35}.jssort101 .p:hover.pdn{padding:0}.jssort101 .p:hover.pdn .cv{border:2px solid #fff;background:none;opacity:.35}.jssort101 .pav .cv{border-color:#fff;opacity:.35}.jssort101 .pav .a,.jssort101 .p:hover .a{visibility:visible}.jssort101 .t{position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6}.jssort101 .pav .t,.jssort101 .p:hover .t{opacity:1}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:480px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div data-p="170.00">
<img data-u="image" src="img/031.jpg" />
<img data-u="thumb" src="img/031-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/032.jpg" />
<img data-u="thumb" src="img/032-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/033.jpg" />
<img data-u="thumb" src="img/033-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/034.jpg" />
<img data-u="thumb" src="img/034-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/035.jpg" />
<img data-u="thumb" src="img/035-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/036.jpg" />
<img data-u="thumb" src="img/036-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/037.jpg" />
<img data-u="thumb" src="img/037-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/038.jpg" />
<img data-u="thumb" src="img/038-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/039.jpg" />
<img data-u="thumb" src="img/039-s190x90.jpg" />
</div>
<div data-p="170.00">
<img data-u="image" src="img/040.jpg" />
<img data-u="thumb" src="img/040-s190x90.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
<div data-u="slides">
<div data-u="prototype" class="p" style="width:190px;height:90px;">
<div data-u="thumbnailtemplate" class="t">
</div>
<svg viewbox="0 0 16000 16000" class="cv">
<circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
<line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
<line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
</svg>
</div>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora106" style="width:55px;height:55px;top:162px;left:30px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="c" cx="8000" cy="8000" r="6260.9"></circle>
<polyline class="a" points="7930.4,5495.7 5426.1,8000 7930.4,10504.3 "></polyline>
<line class="a" x1="10573.9" y1="8000" x2="5426.1" y2="8000"></line>
</svg>
</div>
<div data-u="arrowright" class="jssora106" style="width:55px;height:55px;top:162px;right:30px;" data-scale="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="c" cx="8000" cy="8000" r="6260.9"></circle>
<polyline class="a" points="8069.6,5495.7 10573.9,8000 8069.6,10504.3 "></polyline>
<line class="a" x1="5426.1" y1="8000" x2="10573.9" y2="8000"></line>
</svg>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init();</script><br />
<!-- #endregion Jssor Slider End --><br />
</body><br />
</html><br />
Code Di Atas Resposiv Untuk Tampilan Destop Dan Hanpon Jadi Kalian Tinggal Edit gambar ajah Karna Sya Sudah Kemas menjadi satudan untuk gambar sediri terdapat dua tipe ukuran
Ukuran Gambar tumbnail : 190x90
ukuran gambar utama : 980x380
saya jelaskan sedikit gambar tumbnail .bertujuan untuk memberi efek slide yang akan mengikuti slide gambar utama Jika bingung kalian bisa comments Di bawah
Untuk pemasangan Kalian bisa pasang di template blog bisa di bagian widged dan bis juga di web pribadi Ok semoga bermanfaat ..
Sumber code: https://www.jssor.com
