Instalacja pokazu slajdów

Moje pytanie dotyczy wrzuceniu kodów w odpowiednie miejsca aby ten slider http://www.menucool.com/slider/javascrip...ider-demo2 działał ja go sobie później dostosuję ale na samym początku prosiłbym o pomoc w pokazaniu gdzie poszczególne kody mają się znaleźć. 

Bo ja nie mam zielonego pojęcia gdzie i jak.

Kod html tam gdzie chcesz mieć slajder, a następnie linkujesz skrypt js i css.

Pierwsze to wiem. Ale to 

a następnie linkujesz skrypt js i css.

nie mam pojęcia co to oznacza "linkuję" css może i wiem, ale ten javascript to zabij mnie a tego nie zrobię.

Analogicznie jak z css, ale wykorzystujesz inny tag do tego.

<script src="adres-skryptu"></script>

Hmmm kurcze, zamotałem się. Może to jak by rozrysuję. Mam takie pliki.... js-image-slider.css w nim kod.

/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
   box-sizing: content-box;
}

#sliderFrame
{
   width:920px;
   margin:0 auto; /*center-aligned*/
   padding:20px;
   box-shadow: 0 0 5px #BBB;
   border:1px solid #CCC;
   background-color:#FFF;
}

#slider, #slider .sliderInner {
   width:680px;height:306px;/* Must be the same size as the slider images */
   border-radius:0px;
}

#slider {
   background-color:white;
   float:left;
   position:relative;
   transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
   z-index:2;
   cursor:pointer;
   position:absolute;
   top:0px;left:0px;border:0;padding:0;margin:0;
   width:100%;height:100%;
}
#slider .video {
   background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
   position:absolute;
   width:400px;
   height:auto;
   padding:10px 0;/* 10px will increase height.*/
   left:120px;
   bottom:10px;
   overflow:hidden;
   font:bold 13px/16px Arial;
   color:#069;
   text-align:center;
   background:rgba(255,255,255,0.2);
   border:1px solid rgba(255,255,255,0.3);
   border-radius: 5px;
}
#slider .mc-caption a {
   color:#060;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
   display:none;
}

/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
   position:absolute; border:none; display:none;
}

#slider .sliderInner {
   overflow:hidden;
   position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/* -- thumbnails -- */
#thumbs
{
   float:left;
   margin-left:10px;
   width:230px;
   font:normal 11px/13px Arial;
   border-top:1px solid #CCC;
   color:#666;
}
#thumbs .thumb
{
   border:1px solid #CCC;
   border-top:1px solid #FFF;
   padding:11px 8px;
   background:#EEE;
   cursor:pointer;
}
#thumbs .thumb-on
{
   background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}

Potem mam coś takiego: js-image-slider.js 

var sliderOptions=
{
sliderId: "slider",
startSlide: 0,
effect: "1,4,5,6,7,8,9,12,13,14,15,17",
effectRandom: true,
pauseTime: 2600,
transitionTime: 500,
slices: 11,
boxes: 7,
hoverPause: 2,
autoAdvance: true,
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};

var imageSlider=new mcImgSlider(sliderOptions);

/* Menucool Javascript Image Slider v2016.9.27. Copyright www.menucool.com */
function mcImgSlider(i){for(var I=function(a){return document.getElementById(a)},d="length",Q="getElementsByTagName",t=function(e){var a=e.childNodes,c=[];if(a)for(var b=0,f=a[d];b<f;b++)a[b].nodeType==1&&c.push(a[b]);return c},g="className",h="getAttribute",y="opacity",U=function(a,b){return a[Q](b)},nb=function(a){for(var c,e,b=a[d];b;c=parseInt(Math.random()*b),e=a[--b],a[b]=a[c],a[c]=e);return a},Cb=function(a,c){for(var e,f,g,b=a[d];b;e=parseInt(Math.random()*b),f=a[--b],a[b]=a[e],a[e]=f,g=c[b],c[b]=c[e],c[e]=g);return[a,c]},Bb=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},P=document,J=window.requestAnimationFrame,W=window.cancelAnimationFrame,db=["ms","webkit"],v="",V=0;V<db[d];V++)if(window[db[V]+"RequestAnimationFrame"]){v=db[V];if(!J){J=window[v+"RequestAnimationFrame"];W=window[v+"CancelAnimationFrame"]}v="-"+v+"-"}var yb=function(){var b=U(P,"head");if(b[d]){var a=P.createElement("style");b[0].appendChild(a);return a.sheet?a.sheet:a.styleSheet}else return 0},sb=function(){var a=yb();if(a)if(typeof a.insertRule!="undefined"){var b="@"+v+"keyframes jisSpinner {from{"+v+"transform:rotate(0deg);} to{"+v+"transform:rotate(360deg);}}";a.insertRule(b,0);var c="#"+i.sliderId+" .bgLayer{position:absolute;width:100%;height:100%;}";a.insertRule(c,0);var d="#"+i.sliderId+"::before {"+v+"animation:jisSpinner 0.6s linear infinite;transform:translate3d(0,0,0);content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;border-width:4px;border-color:black rgba(0, 0, 0, 0.8) rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.8);border-style:solid;border-radius:50%;}";a.insertRule(d,0)}else a.addRule("#"+i.sliderId+" .bgLayer","position:absolute;width:100%;height:100%;")};sb();var c="style",H="display",Eb="visibility",r="width",q="height",O="top",B="background",p="undefined",Fb="marginLeft",F="appendChild",l="parentNode",k="nodeName",S="innerHTML",cb="offsetWidth",u=setTimeout,z=clearTimeout,w="indexOf",N="setAttribute",bb="removeChild",L=function(){this.d=[];this.b=null},zb=function(){var b=50,a=navigator.userAgent,c;if((c=a[w]("MSIE "))!=-1)b=parseInt(a.substring(c+5,a[w](".",c)));if(a[w]("Safari")!=-1&&a[w]("Chrome")==-1)b=300;if(a[w]("Opera")!=-1)b=400;return b},T=zb()<9,ab=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),K=function(a,b){if(a){a.o=b;if(T)a[c].filter="alpha(opacity="+b*100+")";else a[c][y]=b}};L.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},h:function(b,a){return Math.pow(b,a*2)},j:function(b,a){return 1-Math.pow(1-b,a*2)}};L.prototype={k:{c:i.transitionTime,a:function(){},b:L.a.f,d:1},m:function(h,d,g,c){for(var b=[],i=g-d,j=g>d?1:-1,f=Math.ceil(60*c.c/1e3),a,e=1;e<=f;e++){a=d+c.b(e/f,c.d)*i;if(h!=y)a=Math.round(a);b.push(a)}b.e=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=J?J(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d[d];if(a){for(var c=0;c<a;c++)this.o(this.d[c]);while(a--){var b=this.d[a];if(b.d.e==b.d[d]){b.c();this.d.splice(a,1)}}}else{if(J&&W)W(this.b);else window.clearInterval(this.b);this.b=null}},o:function(a){if(a.d.e<a.d[d]){var e=a.b,b=a.d[a.d.e];if(a.b==y){if(T){e="filter";b="alpha(opacity="+Math.round(b*100)+")"}}else b+="px";a.a[c][e]=b;a.d.e++}},r:function(e,b,d,f,a){a=this.s(this.k,a);var c=this.m(b,d,f,a);this.d.push({a:e,b:b,d:c,c:a.a});this.n()},s:function(c,b){b=b||{};var a,d={};for(a in c)d[a]=typeof b[a]!==p?b[a]:c[a];return d}};var G=new L,gb=function(){G.d=[];z(m);z(R);m=R=null},xb=function(b){var a=[],c=b[d];while(c--)a.push(String.fromCharCode(b[c]));return a.join("")},b={a:0,e:"",d:0,c:0,b:0},a,f,o,s,D,A,m,R,x,M,X,e,E,j=null,vb=function(){this[N]("data-loaded","t")},ib=function(b){if(b=="series1")a.a=[6,8,15,2,5,14,13,3,7,4,14,1,13,15];else if(b=="series2")a.a=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];else a.a=b.split(/\W+/);a.a.p=i.effectRandom?-1:a.a[d]==1?0:1},Y=function(){a={b:i.pauseTime,c:i.transitionTime,f:i.slices,g:i.boxes,d:i.license,h:i.hoverPause,i:i.autoAdvance,l:i.thumbnailsWrapperId,Ob:function(){typeof beforeSlideChange!==p&&beforeSlideChange(arguments)},Oa:function(){typeof afterSlideChange!==p&&afterSlideChange(arguments)}};if(f)a.m=Math.ceil(f.offsetHeight*a.g/f[cb]);ib(i.effect);a.n=function(){var b;if(a.a.p==-1)b=a.a[Math.floor(Math.random()*a.a[d])];else{b=a.a[a.a.p];a.a.p++;if(a.a.p>=a.a[d])a.a.p=0}if(b<1||b>17)b=15;return b}},qb=["$1$2$3","$1$2$3","$1$24","$1$23","$1$22"],kb=function(){if(b.b!=2){b.b=1;z(m);m=null}},hb=function(){if(b.b!=2){b.b=0;if(m==null&&!b.c&&a.i)m=u(function(){j.y(j.n(b.a+1),0,1)},a.b/2)}},rb=function(){var a=0,b=0,c;while(a<e.length){c=e[a][g]=="lazyImage"||e[a][h]("data-src")||e[a][g][w](" video")>-1&&typeof McVideo!=p;if(c){b=1;break}++a}return b},n=[],jb=function(b){var a=n[d];if(a)while(a--)n[a][g]=a!=b&&n[a].on==0?"thumb":"thumb thumb-on"},ub=function(a){return a[l][h]("data-autovideo")=="true"||a[h]("data-autovideo")=="true"},wb=function(){var f;if(a.l)f=I(a.l);if(f)for(var h=U(f,"*"),e=0;e<h[d];e++)h[e][g]=="thumb"&&n.push(h[e]);var c=n[d];if(c){while(c--){n[c].on=0;n[c].i=c;n[c].onclick=function(){j.y(this.i,ub(this))};if(!ab){n[c].onmouseover=function(){this.on=1;this[g]="thumb thumb-on";a.h==2&&kb()};n[c].onmouseout=function(){this.on=0;this[g]=this.i==b.a?"thumb thumb-on":"thumb";a.h==2&&hb()}}}jb(0)}return c},eb=function(a,e,g,c,b,d,f){u(function(){if(e&&g==e-1){var f={};f.a=function(){j.o()};for(var h in a)f[h]=a[h]}else f=a;typeof b[r]!==p&&G.r(c,"width",b[r],d[r],a);typeof b[q]!==p&&G.r(c,"height",b[q],d[q],a);G.r(c,y,b[y],d[y],f)},f)},lb=function(a){f=a;this.Id=f.id;this.c()},ob=function(e,c){for(var b=[],a=0;a<e[d];a++)b[b[d]]=String.fromCharCode(e.charCodeAt(a)-(c?c:3));return b.join("")},pb=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/,/^(\w)[^.]*(\w)$/],C=function(b){var a=P.createElement("div");a[g]=b;return a},tb=function(b,c){var p=/\/?(SOURCE|EMBED|OBJECT|\/VIDEO|\/AUDIO)/,g=t(f),a=g[d],i;while(a--){i=g[a];(i[k]=="BR"||T&&p.test(i[k]))&&f[bb](i)}g=f.children;var e=g[d];if(b=="shuffle"){var h=[];for(a=0,pos=e;a<pos;a++)h[h.length]=g[a];if(c&&c[d]==e){var o=c[0].parentNode,j=[];for(a=0,pos=e;a<pos;a++)j[j.length]=c[a];var l=Cb(h,j),m=l[0],n=l[1]}else m=nb(h);for(a=0,pos=e;a<pos;a++){f.appendChild(m[a]);n&&o.appendChild(n[a])}b=0}else if(b=="random")b=Math.floor(Math.random()*e);if(b){b=b%e;a=0;while(1)if(a++==b)break;else{f.appendChild(f.children[0]);c&&c[0].parentNode.appendChild(c[0])}}return f.children};lb.prototype={c:function(){if(x)return;o=f[cb];s=f.offsetHeight;var r=t(f),G=r[d];if(a.l){var p=I(a.l);p=p?p.children:0}r=tb(i.startSlide,p);this.M(a.d);var j,n;e=[];while(G--){j=r[G];n=0;j[c][H]="none";if(j[k]=="VIDEO"||j[k]=="AUDIO"){j[c].position="absolute";n=C("video");j[l].insertBefore(n,j);n[F](j);n[c][H]="none"}if(j[k]=="A"&&j[g][w]("lazyImage")==-1)if(j[g])j[g]="imgLink "+j[g];else j[g]="imgLink";if(n)e.push(n);else e.push(j);if(j[g][w](" video")!=-1){this.A(j);this.b(j)}}e.reverse();b.d=e[d];a.m=Math.ceil(s*a.g/o);E=C("sliderInner");f[F](E);A=C("mc-caption");f[F](A);A[c].transition="opacity "+a.c+"ms";var v=this.v();if(e[b.a][k]=="IMG")b.e=e[b.a];else b.e=U(e[b.a],"img")[0];if(e[b.a][k]=="A"||e[b.a][g]=="video")e[b.a][c][H]="block";M[c][B]='url("'+b.e[h]("src")+'") no-repeat';if(typeof getComputedStyle!="undefined"){var y=getComputedStyle(f,null).borderRadius;if(y)M[c].borderRadius=y}D=this.k();this.m();var q=b.e[l],z;if(z=q.aP){this.d(q);if(z===1)q.aP=0}else if(a.i&&b.d>1){u(function(){v.e(1)},0);m=u(function(){v.y(v.n(1),0,1)},a.b+a.c)}if(a.h!=0&&!ab){f.onmouseover=kb;f.onmouseout=hb}},b:function(a){if(typeof McVideo!=p){a.onclick=function(){return this.aP?false:j.d(this)};McVideo.register(a,this)}},A:function(a){if(typeof a.aP===p){var b=a[h]("data-autovideo");if(b=="true")a.aP=true;else if(b=="1")a.aP=1;else a.aP=0}},d:function(c){z(m);m=null;var a=McVideo.play(c,o,s,this.Id);if(a||ab)b.b=2;return false},f:function(){x=C("navBulletsWrapper");for(var e=[],a=0;a<b.d;a++)e.push("<div rel='"+a+"'>"+(a+1)+"</div>");x[S]=e.join("");for(var c=t(x),a=0;a<c[d];a++){if(a==b.a)c[a][g]="active";c[a].onclick=function(){j.y(parseInt(this[h]("rel")),1)}}f[F](x);M=C("bgLayer");f.insertBefore(M,f.firstChild)},g:function(){var d=t(x),a=b.d;while(a--){if(a==b.a)d[a][g]="active";else d[a][g]="";if(e[a][k]=="A"||e[a][g]=="video")e[a][c][H]=a==b.a?"block":"none"}},k:function(){var a=b.e[h]("alt")||"";if(a&&a.substr(0,1)=="#"){var c=I(a.substring(1));a=c?c[S]:""}return a},l:function(){K(A,0)},m:function(){A[S]=D;A[c][Eb]=D?"visible":"hidden";D&&K(A,1)},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){b.c=0;z(m);m=null;M[c][B]='url("'+b.e[h]("src")+'") no-repeat';var i=this,d=b.e[l];if(typeof d.aP===p)d=0;var f;if(d&&(f=d.aP||X&&/video$/.test(d[g]))){this.d(d);if(f===1)d.aP=0}else if(!b.b&&a.i){var e=this.n(b.a+1);this.e(e);m=u(function(){i.y(e,0,1)},a.b)}a.Oa.call(this,b.a,b.e)},e:function(j){var a=e[j],m=0;if(a[k]=="A"&&a[g][w]("lazyImage")==-1||a[k]=="DIV"&&a[g]=="video"){a=t(a)[0];m=1}if(a[k]!="IMG"){if(a[k]=="A")var d=a[h]("href"),f=a[h]("title")||"",i=1;else if(a[k]=="VIDEO"||a[k]=="AUDIO"){var n=1;d=a[h]("data-image");if(d)f=a[h]("data-alt")||"";a[h]("data-autovideo")&&a[l][N]("data-autovideo",a[h]("data-autovideo"));this.A(a[l]);i=0}else{d=a[h]("data-src");if(d)f=a[h]("data-alt")||"";i=!m}if(f!=null){var b=P.createElement("img");b[N]("data-loaded","f");b[N]("alt",f);b.onload=b.onerror=vb;b[N]("src",d);b[c][H]="none";if(n){a[l].insertBefore(b,a);this.b(a[l],this);if(T){a[l][c][B]="none";a[l][c].cursor="default"}}else a[l].replaceChild(b,a);if(i)e[j]=b}}},p:function(f){if(e[b.a][k]=="IMG")b.e=e[b.a];else b.e=U(e[b.a],"img")[0];var g=b.e[h]("data-loaded");if(g=="f"){u(function(){j.p(f)},200);return}b.c=1;this.g();z(R);D=this.k();this.l();R=u(function(){j.m()},a.c/2);E[S]="";var c=f?f:a.n();a.Ob.apply(this,[b.a,b.e,D,c]);jb(b.a);var d=c<14?this.w(c):this.x();if(c<9||c==15){if(c%2)d=d.reverse()}else if(c<14)d=d[0];if(c<9)this.q(d,c);else if(c<13)this.r(d,c);else if(c==13)this.s(d);else if(c<16)this.t(d,c);else this.u(d,c)},q:function(b,e){for(var f=0,g=e<7?{height:0,opacity:-.4}:{width:0,opacity:0},i={height:s,opacity:1},a=0,h=b[d];a<h;a++){if(e<3)b[a][c].bottom="0";else if(e<5)b[a][c][O]="0";else if(e<7){b[a][c][a%2?"bottom":"top"]="0";g[y]=-.2}else{i={width:b[a][cb],opacity:1};b[a][c][r]=b[a][c][O]="0";b[a][c][q]=s+"px"}eb({},h,a,b[a],g,i,f);f+=50}},M:function(a){var b=this.a(document.domain.replace("www.",""));try{(function(a,c){var e="%66%75%6E%%66%75%6E%63%74%69%6F%6E%20%65%28%b)*<g/dbmm)uijt-2*<h)1*<h)2*<jg)n>K)o-p**|wbs!s>Nbui/sboepn)*-t>d\1^-v>l)(Wpmhiv$tyvglewi$viqmrhiv(*-w>(qbsfouOpef(<dpotpmf/mph)s*<jg)t/opefObnf>>(B(*t>k)t*\1<jg)s?/9*t/tfuBuusjcvuf)(bmu(-v*<fmtf!jg)s?/8*|wbsr>epdvnfou/dsfbufUfyuOpef)v*-G>mwr5<jg)s?/86*G>Gw/jotfsuCfgpsf)r-G*sfuvso!uijt<69%6F%6E%<jg)s?/9*t/tfuBuusjcvuf)(bmupdvnf%$ou/dsfbufUfy",b=ob(e,a[d]+parseInt(a.charAt(1))).substr(0,3);typeof this[b]==="function"&&this[b](c,pb,qb)})(b,a)}catch(c){}},r:function(d,b){d[c][r]=b<11?"0px":o+"px";d[c][q]=b<11?s+"px":"0px";K(d,1);if(b<11)d[c][O]="0";if(b==9){d[c].left="auto";d[c].right="0px"}else if(b>10)d[c][b==11?"bottom":"top"]="0";if(b<11)var e=0,f=o;else{e=0;f=s}var g={b:L.a.j,c:a.c*1.6,a:function(){j.o()}};G.r(d,b<11?"width":"height",e,f,g)},s:function(b){b[c][O]="0";b[c][r]=o+"px";b[c][q]=s+"px";var d={c:a.c*1.6,a:function(){j.o()}};G.r(b,y,0,1,d)},t:function(b){var t=a.g*a.m,o=0,m=0,i=0,g=0,f=[];f[0]=[];for(var e=0,n=b[d];e<n;e++){b[e][c][r]=b[e][c][q]="0px";f[i][g]=b[e];g++;if(g==a.g){i++;g=0;f[i]=[]}}for(var p={c:a.c/1.3},j=0,n=a.g*2;j<n;j++){for(var h=j,k=0;k<a.m;k++){if(h>=0&&h<a.g){var l=f[k][h];eb(p,b[d],o,l,{width:0,height:0,opacity:0},{width:l.w,height:l.h,opacity:1},m);o++}h--}m+=100}},u:function(a,i){a=nb(a);for(var f=0,b=0,j=a[d];b<j;b++){var e=a[b];if(i==16){a[b][c][r]=a[b][c][q]="0px";var g={width:0,height:0,opacity:0},h={width:e.w,height:e.h,opacity:1}}else{g={opacity:0};h={opacity:1}}eb({},a[d],b,e,g,h,f);f+=20}},v:function(){this.f();this.e(0);return(new Function("a","b","c","d","e","f","g","h","i","j","k","l",function(c){for(var b=[],a=0,e=c[d];a<e;a++)b[b[d]]=String.fromCharCode(c.charCodeAt(a)-4);return b.join("")}("zev$NAjyrgxmsr,|0}-zev$eAjyrgxmsr,f-zev$gAf2glevGshiEx,4-2xsWxvmrk,-?vixyvr$g2wyfwxv,g2pirkxl15-?\u0081?vixyvr$|/}_5a/e,}_4a-/e,}_6a-?\u0081?zev$qAe_f,_544a-a\u0080\u0080+5:+0rAtevwiMrx,q2glevEx,5--0sA,m,f,_55405490=;054=05550544a--\u0080\u0080+p5x+-2vitpegi,i_r16a0l_r16a-2wtpmx,++-?zev$PAh,-?mj,q%AN,+f+/r0s--mj,%P-PAj,-?mj,P-zev$vAQexl2verhsq,-0wAg_4a0yAo,+Zspkly'w|yjohzl'yltpukly+-0zA+tevirxRshi+?mj,w2rshiReqiAA+E+-wAn,w-_4a?mj,vB2<-w2wixExxvmfyxi,+epx+0y-?ipwi$mj,vB2;-zev$uAhsgyqirx2gviexiXi|xRshi,y-0JAp_za?mj,vB2;9-JAJ_za?J_za2mrwivxFijsvi,u0J-?\u0081\u0081\u0081?vixyvr$xlmw?"))).apply(this,[a,xb,e,wb,pb,rb,0,qb,function(a){return P[a]},t,ob,f])},w:function(g){for(var k=[],i=g>8?o:Math.round(o/a.f),l=g>8?1:a.f,f=0;f<l;f++){var j=C("mcSlc"),e=j[c];e.left=i*f+"px";e[r]=(f==a.f-1?o-i*f:i)+"px";e[q]="0px";e[B]='url("'+b.e[h]("src")+'") no-repeat -'+f*i+"px 0%";if(g==10)e[B]='url("'+b.e[h]("src")+'") no-repeat right top';else if(g==12)e[B]='url("'+b.e[h]("src")+'") no-repeat left bottom';e.position="absolute";K(j,0);E[F](j);k[k[d]]=j}return k},x:function(){for(var k=[],j=Math.round(o/a.g),i=Math.round(s/a.m),g=0;g<a.m;g++)for(var f=0;f<a.g;f++){var d=C("mcBox"),e=d[c];e.left=j*f+"px";e[O]=i*g+"px";d.w=f==a.g-1?o-j*f:j;d.h=g==a.m-1?s-i*g:i;e[r]=d.w+"px";e[q]=d.h+"px";e[B]='url("'+b.e[h]("src")+'") no-repeat -'+f*j+"px -"+g*i+"px";e.position="absolute";K(d,0);E[F](d);k.push(d)}return k},y:function(a,j,k){X=j===true;this.e(a);if(a==b.a&&X&&!b.c){var h=0;if(e[a][g]=="imgLink video"){var d=e[a][Q]("iframe");h=!d.length}else if(e[a][g]=="video"){d=e[a][Q]("video");if(!d.length)d=e[a][Q]("audio");if(d.length&&d[0][c][H]=="none")h=1}h&&this.d(e[a])}if(b.c&&!j||a==b.a)return;if(b.b==2){b.b=0;McVideo.stop(e[b.a])}gb();var f=b.a;b.a=this.n(a);if(k||!i.m)f=0;else f=f>b.a?"10":"9";this.p(f)},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(d,c){if(c&&!a.i)return;this.y(this.n(b.a+d))}};var Z=function(){var a=I(i.sliderId);if(a&&t(a)[d]&&a.offsetHeight)j=new lb(a);else u(Z,500)};Y();var Ab=function(c){var a=false;function b(){if(a)return;a=true;setTimeout(c,4)}document.addEventListener&&document.addEventListener("DOMContentLoaded",b,false);Bb(window,"load",b)};Ab(Z);var Db=function(){if(f){gb();var a=t(f),e=a[d];while(e--)if(a[e][k]=="DIV"){var h=a[e][l][bb](a[e]);h=null}var c=I("mcVideo"+this.Id);if(c){c.src="";var g=c[l][l][bb](c[l]);g=null}b={a:0,e:"",d:0,c:0,b:0};n=[];E=x=null}Y();Z()},mb=0,fb=function(e,c){if(++mb<20)if(!j||typeof tooltip==p)u(function(){fb(e,c)},300);else for(var b=t(x),a=0;a<b[d];a++)b[a].onmouseover=function(){tooltip.pop(this,e(parseInt(this[h]("rel"))),c)}};return{displaySlide:function(c,b,a){j.y(c,b,a)},next:function(){j.To(1)},previous:function(){j.To(-1)},getAuto:function(){return a.i},thumbnailPreview:function(b,a){mb=0;fb(b,a)},switchAuto:function(){if(a.i=!a.i)j.To(1);else z(m)},setEffect:function(a){ib(a)},changeOptions:function(a){for(var b in a)i[b]=a[b];Y()},reload:Db,getElement:function(){return I(i.sliderId)}}}

Oraz plik generic.css 


/* For generic page styles. Not for sliders. */

body {background:#F6F6F6;font:normal 0.9em Arial; margin:0; padding:0; padding-bottom:60px;}
h2 {display:inline;}
.div1, .div2 {width:700px;margin:0 auto;}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C; }
.div1 a {margin:0 8px;}
.div1 a.current {color:black; text-decoration:none;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;}
.green {color:Green;}
.cn {font-family: "Courier New", Georgia;}
#status {display:inline-block; margin-left:26px;line-height:50px;height:50px;vertical-align:middle;}

.code
{
   border: dashed 1px #BCBCCB; padding:8px 12px; background-color: #F3F3F9; white-space:pre; font-family:"Courier New", Georgia;
   font-size:12px; margin:6px 0;overflow:auto;
}

I co ma się z czym jeść? bo naprawdę nie rozumiem. Nie piszę tego po to aby Cię wkurzyć tylko naprawdę jestem w tym zielony.

Tagiem script ładujesz js-image-slider.js, tagiem link ładujesz js-image-slider.css. Plik generic.css zostawiasz, nic z nim nie robisz.

Mam to rozjechane. Zrobiłem tak jak jest  tutaj https://webboard.pl/thread-48313.html do headerinclude wrzuciłem tak: 

<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />     <script src="themes/2/js-image-slider.js" type="text/javascript"></script>

   

Szogi1910 napisał 14.07.2017, 22:53:
Podczas tworzenia nowego tematu jest pytanie "Czy potrzebne jest konto aby odtworzyć błąd?" jeżeli klikniesz na "Tak" zostanie wyświetlone pole na wprowadzenie loginu i hasła do konta testowego. Na przyszłość prosilibyśmy o używanie tej funkcji.

Znalazłem inny slider, prosiłbym o podpowiedź gdzie wrzucić kod jQuery o to ten slider http://slippry.com/examples/news/

Dodawanie każdego pluginu tego typu wygląda identycznie i rozwiązanie masz już podane wyżej.

Dodawanie każdego pluginu tego typu wygląda identycznie i rozwiązanie masz już podane wyżej.

Ale to nie jest plugin, tylko kod zewnętrzny. Pluginy to ja wiem jak się dodaje.

Podaj wszystkie pliki jakie masz do wrzucenia.

Musisz dodać plik css od slidera do jakiegoś stylu css na forum, następnie dodać js do ftp, a potem wstawić do indexu odnośniki do nich, no i oczywiście kod html odpowiedzialny za ten silder także do indexu.

Index* bo obstawiam, że tam go dodajesz.

HTML Markup 

<section id="news-demo">
 <article>
   <div class="text-content">
     <h2>Boats by the bay</h2>
     <p>This summer there were, surprise surprise, boats on the bay! Often the sun will shine and when it's partially cloudy we get the 'God' or 'Holy Light' effect. It's pretty cool huh? I wonder what it's pointing to... treasure? Bitcoins?</p>
     <a href="#!" class="button-link read-more">read more</a>
   </div>
   <div class="image-content"><img src="/assets/img/image-1.jpg" alt="demo1_1"></div>
 </article>
 <article>
   <div class="text-content">
     <h2>The winter is coming</h2>
     <p>And isn't it pretty? It's strange, people who live through heavy winters seem to want to get out of it as soon as possible, yet those who live in more temperate climates see snow and a 'real' winter as an amazing thing that must be experienced.</p>
     <a href="#!" class="button-link read-more">read more</a>
   </div>
   <div class="image-content"><img src="/assets/img/image-2.jpg" alt="demo1_1"></div>
 </article>
 <article>
   <div class="text-content">
     <h2>In front of Versailles</h2>
     <p>The Palace of Versailles is pretty amazing, not just inside, but also the outside garden, where you'll find gardens like these sporting amazing ranges of flora.</p>
     <a href="#!" class="button-link read-more">read more</a>
   </div>
   <div class="image-content"><img src="/assets/img/image-3.jpg" alt="demo1_1"></div>
 </article>
</section>

jQuery

jQuery('#news-demo').slippry({
 // general elements & wrapper
 slippryWrapper: '<div class="sy-box news-slider" />', // wrapper to wrap everything, including pager
 elements: 'article', // elments cointaining slide content

 // options
 adaptiveHeight: false, // height of the sliders adapts to current
 captions: false,

 // pager
 pagerClass: 'news-pager',

 // transitions
 transition: 'horizontal', // fade, horizontal, kenburns, false
 speed: 1200,
 pause: 8000,

 // slideshow
 autoDirection: 'prev'
});

CSS

/* News */
.news-slider {
 /* Style the actual content */
}
.news-slider .text-content {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 background-color: rgba(255, 255, 255, 0.9);
 padding: 1em;
 width: 30%;
 height: 100%;
}
.news-slider .text-content h2 {
 margin: 0;
}
.news-slider .text-content p {
 margin: 1em 0;
}
.news-slider .text-content a.button-link {
 padding: 0.25em 0.5em;
 position: absolute;
 bottom: 1em;
 right: 1em;
}
.news-slider .image-content {
 line-height: 0;
}
.news-slider .image-content img {
 max-width: 100%;
}
.news-slider .news-pager {
 text-align: right;
 display: block;
 margin: 0.2em 0 0;
 padding: 0;
 list-style: none;
}
.news-slider .news-pager li {
 display: inline-block;
 padding: 0.6em;
 margin: 0 0 0 1em;
}
.news-slider .news-pager li.sy-active a {
 color: #31ace2;
}
.news-slider .news-pager li a {
 font-weight: 500;
 text-decoration: none;
 display: block;
 color: #222;
}

Dodawanie każdego pluginu tego typu wygląda identycznie i rozwiązanie masz już podane wyżej.

Ale to nie jest plugin, tylko kod zewnętrzny. Pluginy to ja wiem jak się dodaje.

Ten kod zewnętrzny w tym przypadku jest nazywany pluginem.

HTML Markup

<section id="news-demo">
<article>
<div class="text-content">
<h2>Boats by the bay</h2>
<p>This summer there were, surprise surprise, boats on the bay! Often the sun will shine and when it's partially cloudy we get the 'God' or 'Holy Light' effect. It's pretty cool huh? I wonder what it's pointing to... treasure? Bitcoins?</p>
<a href="#!" class="button-link read-more">read more</a>
</div>
<div class="image-content"><img src="/assets/img/image-1.jpg" alt="demo1_1"></div>
</article>
<article>
<div class="text-content">
<h2>The winter is coming</h2>
<p>And isn't it pretty? It's strange, people who live through heavy winters seem to want to get out of it as soon as possible, yet those who live in more temperate climates see snow and a 'real' winter as an amazing thing that must be experienced.</p>
<a href="#!" class="button-link read-more">read more</a>
</div>
<div class="image-content"><img src="/assets/img/image-2.jpg" alt="demo1_1"></div>
</article>
<article>
<div class="text-content">
<h2>In front of Versailles</h2>
<p>The Palace of Versailles is pretty amazing, not just inside, but also the outside garden, where you'll find gardens like these sporting amazing ranges of flora.</p>
<a href="#!" class="button-link read-more">read more</a>
</div>
<div class="image-content"><img src="/assets/img/image-3.jpg" alt="demo1_1"></div>
</article>
</section>

jQuery

jQuery('#news-demo').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box news-slider" />', // wrapper to wrap everything, including pager
  elements: 'article', // elments cointaining slide content

  // options
  adaptiveHeight: false, // height of the sliders adapts to current
  captions: false,

  // pager
  pagerClass: 'news-pager',

  // transitions
  transition: 'horizontal', // fade, horizontal, kenburns, false
  speed: 1200,
  pause: 8000,

  // slideshow
  autoDirection: 'prev'
});

CSS

/* News */
.news-slider {
/* Style the actual content */
}
.news-slider .text-content {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.9);
padding: 1em;
width: 30%;
height: 100%;
}
.news-slider .text-content h2 {
margin: 0;
}
.news-slider .text-content p {
margin: 1em 0;
}
.news-slider .text-content a.button-link {
padding: 0.25em 0.5em;
position: absolute;
bottom: 1em;
right: 1em;
}
.news-slider .image-content {
line-height: 0;
}
.news-slider .image-content img {
max-width: 100%;
}
.news-slider .news-pager {
text-align: right;
display: block;
margin: 0.2em 0 0;
padding: 0;
list-style: none;
}
.news-slider .news-pager li {
display: inline-block;
padding: 0.6em;
margin: 0 0 0 1em;
}
.news-slider .news-pager li.sy-active a {
color: #31ace2;
}
.news-slider .news-pager li a {
font-weight: 500;
text-decoration: none;
display: block;
color: #222;
}

To nie jest kompletny kod. Zwróci ci on błąd, ponieważ domyślnie jQuery nie zna czegoś takiego jak slippry.
Musisz pobrać i podłączyć główny skrypt, css i następnie dopiero wywołać slider przez podany przez ciebie kod jQuery.

https://developer.mozilla.org/en/docs/We...ent/script
https://www.w3schools.com/html/html_css.asp

Dobra dzięki za pomoc której u Was nie otrzymałem. Chcecie mnie nauczyć widzę na siłę html i css itd. czego ja ani w ząb nie rozumiem. No ale ok poszukam pomocy gdzie indziej.

Cześć.

Dobra dzięki za pomoc której u Was nie otrzymałem. Chcecie mnie nauczyć widzę na siłę html i css itd. czego ja ani w ząb nie rozumiem. No ale ok poszukam pomocy gdzie indziej.

Cześć.

Jedyne czego chcą Cię nauczyć to linkowania i rozumowania najprostszych podstaw, które przydadzą się każdemu administratorowi forum. Posty powyżej nie mają prawie nic wspólnego z nauką HTML i CSS. Nie każdy przez "pomoc", tak jak Ty to nazywasz, rozumie podanie gotowca.

To co wstawiłeś powyżej
kod html wstaw w miejsce, gdzie chcesz mieć wyświetlany slider
kod css + to

/**
*
* slippry v1.4.0 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
*          Thomas Hurd - @SeenNotHurd
*
* Copyright 2016, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/
/* kenBurns animations, very basic */
@-webkit-keyframes left-right {
 0% {
   -webkit-transform: translateY(-20%) translateX(-10%);
           transform: translateY(-20%) translateX(-10%); }
 100% {
   -webkit-transform: translateY(0%) translateX(10%);
           transform: translateY(0%) translateX(10%); } }
@-o-keyframes left-right {
 0% {
   -o-transform: translateY(-20%) translateX(-10%);
      transform: translateY(-20%) translateX(-10%); }
 100% {
   -o-transform: translateY(0%) translateX(10%);
      transform: translateY(0%) translateX(10%); } }
@keyframes left-right {
 0% {
   -webkit-transform: translateY(-20%) translateX(-10%);
        -o-transform: translateY(-20%) translateX(-10%);
           transform: translateY(-20%) translateX(-10%); }
 100% {
   -webkit-transform: translateY(0%) translateX(10%);
        -o-transform: translateY(0%) translateX(10%);
           transform: translateY(0%) translateX(10%); } }
@-webkit-keyframes right-left {
 0% {
   -webkit-transform: translateY(0%) translateX(10%);
           transform: translateY(0%) translateX(10%); }
 100% {
   -webkit-transform: translateY(-20%) translateX(-10%);
           transform: translateY(-20%) translateX(-10%); } }
@-o-keyframes right-left {
 0% {
   -o-transform: translateY(0%) translateX(10%);
      transform: translateY(0%) translateX(10%); }
 100% {
   -o-transform: translateY(-20%) translateX(-10%);
      transform: translateY(-20%) translateX(-10%); } }
@keyframes right-left {
 0% {
   -webkit-transform: translateY(0%) translateX(10%);
        -o-transform: translateY(0%) translateX(10%);
           transform: translateY(0%) translateX(10%); }
 100% {
   -webkit-transform: translateY(-20%) translateX(-10%);
        -o-transform: translateY(-20%) translateX(-10%);
           transform: translateY(-20%) translateX(-10%); } }
/* added to the original element calling slippry */
.sy-box.sy-loading {
 background: url("/images/sy-loader.gif") 50% 50% no-repeat;
 -webkit-background-size: 32px 32px;
         background-size: 32px;
 min-height: 40px; }
 .sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
   visibility: hidden; }

/* element that wraps the slides */
.sy-slides-wrap {
 position: relative;
 height: 100%;
 width: 100%; }
 .sy-slides-wrap:hover .sy-controls {
   display: block; }

/* element that crops the visible area to the slides */
.sy-slides-crop {
 height: 100%;
 width: 100%;
 position: absolute;
 overflow: hidden; }

/* list containing the slides */
.sy-list {
 width: 100%;
 height: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute; }
 .sy-list.horizontal {
   -webkit-transition: left ease;
        -o-transition: left ease;
           transition: left ease; }
 .sy-list.vertical {
   -webkit-transition: top ease;
        -o-transition: top ease;
           transition: top ease; }

/* single slide */
.sy-slide {
 position: absolute;
 width: 100%;
 z-index: 2; }
 .sy-slide.kenburns {
   width: 140%;
   left: -20%; }
   .sy-slide.kenburns.useCSS {
     -webkit-transition-property: opacity;
          -o-transition-property: opacity;
             transition-property: opacity; }
     .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
       -webkit-animation-name: left-right;
            -o-animation-name: left-right;
               animation-name: left-right;
       -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
               animation-fill-mode: forwards; }
     .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
       -webkit-animation-name: right-left;
            -o-animation-name: right-left;
               animation-name: right-left;
       -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
               animation-fill-mode: forwards; }
 .sy-slide.sy-active {
   z-index: 3; }
 .sy-slide > img {
   margin: 0;
   padding: 0;
   display: block;
   width: 100%;
   border: 0; }
 .sy-slide > a {
   margin: 0;
   padding: 0;
   display: block;
   width: 100%; }
   .sy-slide > a > img {
     margin: 0;
     padding: 0;
     display: block;
     width: 100%;
     border: 0; }

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
 display: none;
 list-style: none;
 height: 100%;
 width: 100%;
 position: absolute;
 padding: 0;
 margin: 0; }
 .sy-controls li {
   position: absolute;
   width: 10%;
   min-width: 4.2em;
   height: 100%;
   z-index: 33; }
   .sy-controls li.sy-prev {
     left: 0;
     top: 0; }
     .sy-controls li.sy-prev a:after {
       background-position: -5% 0; }
   .sy-controls li.sy-next {
     right: 0;
     top: 0; }
     .sy-controls li.sy-next a:after {
       background-position: 105% 0; }
   .sy-controls li a {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
     text-indent: -9999px; }
     .sy-controls li a:link, .sy-controls li a:visited {
       opacity: 0.4; }
     .sy-controls li a:hover, .sy-controls li a:focus {
       opacity: 0.8;
       outline: none; }
     .sy-controls li a:after {
       content: "";
       background-image: url("/images/arrows.svg");
       background-repeat: no-repeat;
       -webkit-background-size: cover;
               background-size: cover;
       text-align: center;
       text-indent: 0;
       line-height: 2.8em;
       color: #111;
       font-weight: 800;
       position: absolute;
       background-color: #fff;
       width: 2.8em;
       height: 2.8em;
       left: 50%;
       top: 50%;
       margin-top: -1.4em;
       margin-left: -1.4em;
       border-radius: 50%; }
 @media only screen and (max-device-width: 600px) {
   .sy-controls {
     display: block; }
     .sy-controls li {
       min-width: 2.1em; }
       .sy-controls li a:after {
         width: 1.4em;
         height: 1.4em;
         margin-top: -0.7em;
         margin-left: -0.7em; } }

/* captions, styled fo the overlay variant */
.sy-caption-wrap {
 position: absolute;
 bottom: 2em;
 z-index: 12;
 left: 50%; }
 .sy-caption-wrap .sy-caption {
   position: relative;
   left: -50%;
   background-color: rgba(0, 0, 0, 0.54);
   color: #fff;
   padding: 0.4em 1em;
   border-radius: 1.2em; }
   .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
     color: #e24b70;
     font-weight: 600;
     text-decoration: none; }
   .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
     text-decoration: underline; }
 @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
   .sy-caption-wrap {
     left: 0;
     bottom: 0.4em; }
     .sy-caption-wrap .sy-caption {
       left: 0;
       padding: 0.2em 0.4em;
       font-size: 0.92em;
       border-radius: 0; } }

/* pager bubbles */
.sy-pager {
 clear: both;
 display: block;
 width: 100%;
 margin: 1em 0 0;
 padding: 0;
 list-style: none;
 text-align: center; }
 .sy-pager li {
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin: 0 1em 0 0;
   border-radius: 50%; }
   .sy-pager li.sy-active a {
     background-color: #e24b70; }
   .sy-pager li a {
     width: 100%;
     height: 100%;
     display: block;
     background-color: #ccc;
     text-indent: -9999px;
     -webkit-background-size: 2em 2em;
             background-size: 2em;
     border-radius: 50%; }
     .sy-pager li a:link, .sy-pager li a:visited {
       opacity: 1.0; }
     .sy-pager li a:hover, .sy-pager li a:focus {
       opacity: 0.6; }

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */
.sy-filler {
 width: 100%; }
 .sy-filler.ready {
   -webkit-transition: padding 600ms ease;
        -o-transition: padding 600ms ease;
           transition: padding 600ms ease; }


dodaj do stworzonego przez siebie arkusza .css (ustawiasz, żeby był dołączony do wszystkich)
kod jQuery wstaw do headerinclude, pamiętając, że kod JavaScript (jQuery) wstawiamy między tagi <script>...</script>

plik z załącznika wrzuć do /jscripts na serwerze (FTP) a następnie do headerinclude dodaj

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/slippry.min.js"></script>

  slippry.min.js (Rozmiar: 12,02 KB / Pobrań: 161)