Nếu bạn là người ghét sự lặp lại một cách nhàm chán thì với những slider mà hình cứ chạy qua chạy lại đúng một kiểu thì quả là không thể chịu nỗi.
Chính vì lẽ đó nên bài viết này sẽ cung cấp cho bạn 2 kiểu slider với nhiều hiệu ứng chạy ảnh khác nhau.
Lưu ý: ai biết rành rồi thì cứ thế mà làm, còn ai chưa biết gì thì có thể tìm trên anh gồ hoặc để lại comment, mình không giỏi nhưng biết gì là chỉ hết. không giấu diếm gì, vì tính mình là vậy
Chính vì lẽ đó nên bài viết này sẽ cung cấp cho bạn 2 kiểu slider với nhiều hiệu ứng chạy ảnh khác nhau.
Kiểu 1:
Code CSS để làm đẹp cho slider
/* -- slider -- */
#sliderFrame {
position: relative;
width: 700px;
margin: 0 auto 40px;
}
#slider {
width: 700px;
height: 306px;
/* Make it the same size as your images */
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-iIGmfA6N-s506twsMb7C3jGP9RC5WHsHDYLaeRgcgipZDzpro8_fV27ulu4KCSTPadUJnIYsaUqm5XeQURopHk8qBzhqB2vrbb80pxTFGEq3fMkPmp1ZK_y3N1rl8qEBejVDcl6xBQPr/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
/*make the image slider center-aligned */
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top: 320px;
left: 280px;
/* Its position is relative to the #slider */
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
/* each bullet */
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlM8eg5E77d-bNchkC_N-BnrUQ1rgEaPs_5GNZzSzVMe2K84LqiB_Mq7j-QrL7zc9l8WbSWRtCWWJJ8Bo_iBy5BNjaWD67Ab2q6lYupPsnE0xQsw4BbVW2KrGlU3HziZRfLtHa-I-w0KOX/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
/* distance between each bullet*/
_position: relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
Code javascript để chạy hiệu ứng.
<!-- script for slider -->
<script type='text/javascript'>
/*<![CDATA[*/
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 2600,
transitionTime: 500,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
var imageSlider=new mcImgSlider(sliderOptions);
/* Menucool Javascript Image Slider v2012.11.22. Copyright www.menucool.com */
function mcImgSlider(j){var K=function(a){return document.getElementById(a)},d="length",M=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},m="className",p="getAttribute",f="opacity",P=function(a,b){return a.getElementsByTagName(b)},hb=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},gb=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},jb=document,fb=function(c,a,b){return b?c.substring(a,b):c.substring(a)},c="style",R="display",z="visibility",g="width",v="height",O="top",J="background",t="marginLeft",F="appendChild",y="parentNode",D="nodeName",x=function(){this.d=[];this.b=null;this.c()};function Z(){var c=50,a=navigator.userAgent,b;if((b=a.indexOf("MSIE "))!=-1)c=parseInt(a.substring(b+5,a.indexOf(".",b)));if(a.indexOf("Safari")!=-1&&a.indexOf("Chrome")==-1)c=300;return c}var cb=Z()<9,E=function(a,b){if(a){a.o=b;if(cb)a[c].filter="alpha(opacity="+b*100+")";else a[c][f]=b}};x.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},g:function(a){return a},h:function(b,a){return Math.pow(b,a*2)},j:function(b,a){return 1-Math.pow(1-b,a*2)}};x.prototype={k:{c:j.transitionTime,a:function(){},b:x.a.f,d:1},c:function(){for(var b=["webkit","ms","o"],a=0;a<b[d]&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[b[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[b[a]+"CancelAnimationFrame"]||window[b[a]+"CancelRequestAnimationFrame"]}this.e=!!window.requestAnimationFrame},m:function(i,d,h,c){for(var b=[],j=h-d,k=h>d?1:-1,g=Math.ceil(60*c.c/1e3),a,e=1;e<=g;e++){a=d+c.b(e/g,c.d)*j;if(i!=f)a=Math.round(a);b.push(a)}b.index=0;return b},n:function(){this.b==null&&this.p()},p:function(){this.q();var a=this;this.b=this.e?window.requestAnimationFrame(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.index==b.d[d]){b.c();this.d.splice(a,1)}}}else{if(this.e&&window.cancelAnimationFrame)window.cancelAnimationFrame(this.b);else window.clearInterval(this.b);this.b=null}},o:function(a){if(a.d.index<a.d[d]){var e=a.b,b=a.d[a.d.index];if(a.b==f){if(cb){e="filter";b="alpha(opacity="+Math.round(b*100)+")"}}else b+="px";a.a[c][e]=b;a.d.index++}},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]=b[a]!==undefined?b[a]:c[a];return d}};var h=new x,b={a:0,e:"",d:0,c:0,b:0},a,e,s,w,L,G,N,k,n,Q,C,r,A,B,q,U,I,o,l=null,X=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=j.effectRandom?-1:a.a[d]==1?0:1},S=function(){a={b:j.pauseTime,c:j.transitionTime,f:j.slices,g:j.boxes,O0:j.license||"5432",h:j.hoverPause,i:j.autoAdvance,j:j.captionOpacity,k:j.captionEffect=="none"?0:j.captionEffect=="fade"?1:2,l:j.thumbnailsWrapperId,Ob:function(){typeof beforeSlideChange!=="undefined"&&beforeSlideChange(arguments)},Oa:function(){typeof afterSlideChange!=="undefined"&&afterSlideChange(arguments)}};if(e)a.m=Math.ceil(e.offsetHeight*a.g/e.offsetWidth);X(j.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}},lb=["$1$2$3","$1$2$3","$1$24","$1$23"],u=[];function db(){var g;if(a.l)g=K(a.l);if(g)for(var h=g.childNodes,f=0;f<h[d];f++)h[f][m]=="thumb"&&u.push(h[f]);var c=u[d];if(c){while(c--){u[c].on=0;u[c].i=c;u[c].onclick=function(){l.y(this.i)};u[c].onmouseover=function(){this.on=1;this[m]="thumb thumb-on";e.onmouseover()};u[c].onmouseout=function(){this.on=0;this[m]=this.i==b.a?"thumb thumb-on":"thumb";e.onmouseout()}}Y(0)}}function Y(b){var a=u[d];if(a)while(a--)u[a][m]=a!=b&&u[a].on==0?"thumb":"thumb thumb-on"}function eb(b){var a=[],c=b[d];while(c--)a.push(String.fromCharCode(b[c]));return a.join("")}var V=function(a,e,j,c,b,d,i){setTimeout(function(){if(e&&j==e-1){var i={};i.a=function(){l.o()};for(var k in a)i[k]=a[k]}else i=a;typeof b[g]!=="undefined"&&h.r(c,"width",b[g],d[g],a);typeof b[v]!=="undefined"&&h.r(c,"height",b[v],d[v],a);h.r(c,f,b[f],d[f],i)},i)},ab=function(a){e=a;this.b=0;this.c()},kb=[/(?:.*\.)?(\w)([\w\-])[^.]*(\w)\.[^.]+$/,/.*([\w\-])\.(\w)(\w)\.[^.]+$/,/^(?:.*\.)?(\w)(\w)\.[^.]+$/,/.*([\w\-])([\w\-])\.com\.[^.]+$/],H=function(b){var a=document.createElement("div");a[m]=b;return a};ab.prototype={c:function(){s=e.offsetWidth;w=e.offsetHeight;var i=M(e),j=i[d];if(i[j-1][m]=="navBulletsWrapper")return;var f;o=[];while(j--){f=i[j];if(f[D]=="BR")e.removeChild(f);else{f[c][R]="none";o.push(f);if(f[D]=="A"){if(f[m])f[m]="imgLink "+f[m];else f[m]="imgLink";var n=this.z(f),k=f[p]("href");if(n&&typeof McVideo!="undefined"&&k&&k.indexOf("http")!=-1){f.onclick=function(){return this[p]("autoPlayVideo")=="true"?false:l.d(this)};McVideo.register(f,this)}}if(f[D]!="IMG")P(f,"img")[0][c][R]="none"}}o.reverse();b.d=o.length;a.m=Math.ceil(w*a.g/s);if(o[b.a][D]=="IMG")b.e=o[b.a];else b.e=P(o[b.a],"img")[0];if(o[b.a][D]=="A")o[b.a][c][R]="block";e[c][J]='url("'+b.e[p]("src")+'") no-repeat';this.i();L=this.k();var g=this.v(),h=b.e[y];if(this.z(h)&&h[p]("autoPlayVideo")=="true")this.d(h);else if(a.i&&b.d>1)q=setTimeout(function(){g.y(g.n(1),0,1)},a.b+a.c);if(a.h){e.onmouseover=function(){if(b.b!=2){b.b=1;clearTimeout(q);q=null}};e.onmouseout=function(){if(b.b!=2){b.b=0;if(q==null&&!b.c&&a.i)q=setTimeout(function(){g.y(g.n(b.a+1),0,1)},a.b/2)}}}if(Z()==300)e[c]["-webkit-transform"]="translate3d(0,0,0)"},d:function(c){var a=McVideo.play(c,s,w);if(a)b.b=2;return!this.b},f:function(){I=H("navBulletsWrapper");for(var f=[],a=0;a<b.d;a++)f.push("<div rel='"+a+"'></div>");I.innerHTML=f.join("");for(var c=M(I),a=0;a<c[d];a++){if(a==b.a)c[a][m]="active";c[a].onclick=function(){l.y(parseInt(this[p]("rel")))}}e[F](I)},g:function(){var d=M(I),a=b.d;while(a--){if(a==b.a)d[a][m]="active";else d[a][m]="";if(o[a][D]=="A")o[a][c][R]=a==b.a?"block":"none"}},h:function(a,e){var c=function(b){var a=b.charCodeAt(0).toString();return a.substring(a[d]-1)},b=e.replace(kb[a-2],lb[a-2]).split("");return"b"+a+b[1]+c(b[0])+c(b[2])},i:function(){G=H("mc-caption");N=H("mc-caption");k=H("mc-caption-bg");E(k,0);k[F](N);n=H("mc-caption-bg2");n[F](G);E(n,0);n[c][z]=k[c][z]=N[c][z]="hidden";e[F](k);e[F](n);Q=[k.offsetLeft,k.offsetTop,G.offsetWidth];G[c][g]=N[c][g]=G.offsetWidth+"px";this.j()},j:function(){if(a.k==2){C=A={opacity:0,width:0,marginLeft:Math.round(Q[2]/2)};r={opacity:1,width:Q[2],marginLeft:0};B={opacity:a.j,width:Q[2],marginLeft:0}}else if(a.k==1){C=A={opacity:0};r={opacity:1};B={opacity:a.j}}},k:function(){var a=b.e[p]("alt");if(a&&a.substr(0,1)=="#"){var c=K(a.substring(1));a=c?c.innerHTML:""}this.l();return a},l:function(){var e=1;if(G.innerHTML[d]>1)if(!a.k)k[c][z]=n[c][z]="hidden";else{e=0;var b={c:a.c*.3,b:a.k==1?x.a.f:x.a.h,d:a.k==1?0:2},i=b;i.a=function(){k[c][z]=n[c][z]="hidden";l.m()};if(typeof r[t]!=="undefined"){h.r(n,"width",r[g],C[g],b);h.r(k,"width",B[g],A[g],b);h.r(n,"marginLeft",r[t],C[t],b);h.r(k,"marginLeft",B[t],A[t],b)}if(typeof r[f]!=="undefined"){h.r(n,f,r[f],C[f],b);h.r(k,f,B[f],A[f],i)}}e&&setTimeout(function(){l.m()},a.c*.3)},m:function(){N.innerHTML=G.innerHTML=L;if(L){k[c][z]=n[c][z]="visible";if(a.k){var d=a.c*a.k;if(d>1e3)d=1e3;var b={c:d,b:a.k==1?x.a.g:x.a.j,d:a.k==1?0:2};if(typeof r[t]!=="undefined"){h.r(n,"width",C[g],r[g],b);h.r(k,"width",A[g],B[g],b);h.r(n,"marginLeft",C[t],r[t],b);h.r(k,"marginLeft",A[t],B[t],b)}if(typeof r[f]!=="undefined"){h.r(n,f,C[f],r[f],b);h.r(k,f,A[f],B[f],b)}}else{E(n,1);E(k,a.j)}}},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){b.c=0;clearTimeout(q);q=null;e[c][J]='url("'+b.e[p]("src")+'") no-repeat';var f=this,d=b.e[y];if(this.z(d)&&d[p]("autoPlayVideo")=="true")this.d(d);else if(!b.b&&a.i)q=setTimeout(function(){f.y(f.n(b.a+1),0,1)},a.b);a.Oa.call(this,b.a,b.e)},p:function(h){b.c=1;if(o[b.a][D]=="IMG")b.e=o[b.a];else b.e=P(o[b.a],"img")[0];this.g();clearTimeout(U);L=this.k();var g=P(e,"div");i=g[d];while(i--)if(g[i][m]=="mcSlc"||g[i][m]=="mcBox"){var j=e.removeChild(g[i]);delete j}var c=h?h:a.n();a.Ob.apply(this,[b.a,b.e,L,c]);Y(b.a);var f=c<14?this.w(c):this.x();if(c<9||c==15){if(c%2)f=f.reverse()}else if(c<14)f=f[0];if(c<9)this.q(f,c);else if(c<13)this.r(f,c);else if(c==13)this.s(f);else if(c<16)this.t(f,c);else this.u(f,c)},q:function(b,e){for(var h=0,i=e<7?{height:0,opacity:-.4}:{width:0,opacity:0},k={height:w,opacity:1},a=0,j=b[d];a<j;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";i[f]=-.2}else{k={width:b[a].offsetWidth,opacity:1};b[a][c][g]=b[a][c][O]="0";b[a][c][v]=w+"px"}V({},j,a,b[a],i,k,h);h+=50}},r:function(d,b){d[c][g]=b<11?"0px":s+"px";d[c][v]=b<11?w+"px":"0px";E(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=s;else{e=0;f=w}var i={b:x.a.j,c:a.c*1.6,a:function(){l.o()}};h.r(d,b<11?"width":"height",e,f,i)},s:function(b){b[c][O]="0";b[c][g]=s+"px";b[c][v]=w+"px";var d={c:a.c*1.6,a:function(){l.o()}};h.r(b,f,0,1,d)},t:function(b){var s=a.g*a.m,p=0,n=0,j=0,h=0,f=[];f[0]=[];for(var e=0,o=b[d];e<o;e++){b[e][c][g]=b[e][c][v]="0px";f[j][h]=b[e];h++;if(h==a.g){j++;h=0;f[j]=[]}}for(var q={c:a.c/1.3},k=0,o=a.g*2;k<o;k++){for(var i=k,l=0;l<a.m;l++){if(i>=0&&i<a.g){var m=f[l][i];V(q,b[d],p,m,{width:0,height:0,opacity:0},{width:m.w,height:m.h,opacity:1},n);p++}i--}n+=100}},u:function(a,j){a=hb(a);for(var f=0,b=0,k=a[d];b<k;b++){var e=a[b];if(j==16){a[b][c][g]=a[b][c][v]="0px";var h={width:0,height:0,opacity:0},i={width:e.w,height:e.h,opacity:1}}else{h={opacity:0};i={opacity:1}}V({},a[d],b,e,h,i,f);f+=20}},v:function(){return(new Function("a","b","c","d","e","f","g","h","this.f();var l=e(g(b([110,105,97,109,111,100])));if(l==''||l.length>3||a[b([48,79])]==f((+a[b([48,79])].substring(1,2)),g(b([110,105,97,109,111,100])))){d();this.b=1;}else{a[b([97,79])]=a[b([98,79])]=function(){};var k=c[0];if (k.getAttribute(b([102,101,114,104])))var x=k.getAttribute(b([102,101,114,104]));if(x&&x.length>20)var y=h(x,17,19)=='ol';};return this;")).apply(this,[a,eb,o,db,this.a,this.h,function(a){return jb[a]},fb])},w:function(i){for(var k=[],j=i>8?s:Math.round(s/a.f),l=i>8?1:a.f,h=0;h<l;h++){var f=H("mcSlc");f[c].left=j*h+"px";f[c][g]=(h==a.f-1?s-j*h:j)+"px";f[c][v]="0px";f[c][J]='url("'+b.e[p]("src")+'") no-repeat -'+h*j+"px 0%";if(i==10)f[c][J]='url("'+b.e[p]("src")+'") no-repeat right top';else if(i==12)f[c][J]='url("'+b.e[p]("src")+'") no-repeat left bottom';f[c].zIndex=1;f[c].position="absolute";E(f,0);e[F](f);k[k[d]]=f}return k},x:function(){for(var k=[],j=Math.round(s/a.g),i=Math.round(w/a.m),h=0;h<a.m;h++)for(var f=0;f<a.g;f++){var d=H("mcBox");d[c].left=j*f+"px";d[c][O]=i*h+"px";d.w=f==a.g-1?s-j*f:j;d.h=h==a.m-1?w-i*h:i;d[c][g]=d.w+"px";d[c][v]=d.h+"px";d[c][J]='url("'+b.e[p]("src")+'") no-repeat -'+f*j+"px -"+h*i+"px";d[c].zIndex=1;d[c].position="absolute";E(d,0);e[F](d);k.push(d)}return k},y:function(d,g,f){if(b.c&&!g||d==b.a)return 0;if(b.b==2){b.b=0;var c=K("mcVideo");if(c){c.src="";var e=c[y][y].removeChild(c[y]);delete e}}clearTimeout(q);q=null;var a=b.a;b.a=this.n(d);if(f||!j.m)a=0;else a=a>b.a?"10":"9";this.p(a)},n:function(a){if(a>=b.d)a=0;else if(a<0)a=b.d-1;return a},To:function(a){this.y(this.n(b.a+a))},z:function(a){return a[m].indexOf(" video")>-1}};var T=function(){var a=K(j.sliderId);if(a&&P(a,"img")[d]&&a.offsetHeight)l=new ab(a);else setTimeout(T,900)};S();gb(window,"load",T);var ib=function(){if(e){h.d=[];clearTimeout(q);clearTimeout(U);q=U=null;var c=M(e),g=c[d];while(g--)if(c[g][D]=="DIV"){var j=c[g][y].removeChild(c[g]);delete j}var f=K("mcVideo");if(f){f.src="";var i=f[y][y].removeChild(f[y]);delete i}b={a:0,e:"",d:0,c:0,b:0}}S();T();if(!l.b)a.i=l.b},bb=0,W=function(c){if(++bb<20)if(!l||typeof tooltip=="undefined")setTimeout(function(){W(c)},300);else for(var b=M(I),a=0;a<b[d];a++)b[a].onmouseover=function(){tooltip.pop(this,c(parseInt(this[p]("rel"))))}};return{displaySlide:function(c,b,a){l.y(c,b,a)},next:function(){l.To(1)},previous:function(){l.To(-1)},getAuto:function(){return a.i},thumbnailPreview:function(a){bb=0;W(a)},switchAuto:function(){if(a.i=!a.i)l.To(1);else clearTimeout(q)},setEffect:function(a){X(a)},changeOptions:function(a){for(var b in a)j[b]=a[b];S()},reload:ib,getElement:function(){return K(j.sliderId)}}}
/*]]>*/
</script>
Code hiển thị slider mà bạn cần
<div id='sliderFrame'>
<div id='slider'>
<a href='#'><img alt='#htmlcaption1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr46dZXQFqpCpyQEK6s5JAKPwiJWpk0Xx4oIvKbTolso8FKLCbuCgQaYQdKsBmMIKOI2YRvkulSb8RlNECmOqjddHWv9Z7hPCtyxuriSqWuxCGZT1ptGJ2csjSFriYPpzb1q_Elvk25RHf/s1600/image-slider-1.jpg'/></a>
<a href='#'><img alt='Go UP!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1aAv3yIMjsR6f_jbU2lTiQhxaF_8Y86Qc7m3rd_LC9yJCErz4INS403EnXdjLXoD5gnTTLq4mW_LHdmjUaLLwF7hhMhozvfwT6HyuBdJM94nn1cRuUEfdhfsfTdWNf4kTcBwnVYOH_LjI/s1600/image-slider-2.jpg'/></a>
<a href='#'><img alt='Pure Javascript. No jQuery. No flash.' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxB-utsHRcWsV7eLVVRDlUWU1w-nj-KJE24TsStxUHJWeCUqeh-jzePDR_Er6Nt7nndnnHbf0mX12-ptQkIvwk6_rAT3gG6dC0CwUXhPe6LGHv2-h7jg0rn4n6x2AAM3e8YF8dCnzxwvx/s1600/image-slider-3.jpg'/></a>
<a href='#'><img alt='#htmlcaption2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzivuKONnnXQiAT11q_b8QAdjfAN0MLaojd6kbbwdwfYDWkMl5QhG1hKWmAo48TavIte0dASeVYT7CWZBIXio9ATsh_ZxVhEDrg5nbmEyO9SQPSgsYnFiORzdRLNTBzcQN27pK3Mjrotl3/s1600/image-slider-4.jpg'/></a>
<a href='#'><img alt='Stay Connected' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilVfX4X8jTslVgt_M2k4odUhxNfmWFfmsa1KdM0s7m05C8LhElqWaOqo7z_Oohcp4TiZosEWW7tFCZFiMliym6uxujSAFDMhyKIROHpRf238C8tp3V7G35my0aMjlakLiNsvkrjEVy-NX/s1600/image-slider-5.jpg'/></a>
</div>
</div>
Kiểu 2
Code CSS
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}
/* Blogger CSS Conflict Fix */
.camera_pag_ul {
border: none !important;
background: none !important;
}
.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}
.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
Code Javascript và jQuery
<!-- Camera_Slideshow Styles -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 1200, // length of the sliding effect in milliseconds
thumbnails: false, // thumnails & tooltip is controlled by it
pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
Code hiển thị slider
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
<div class="camera_caption fadeFromBottom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even though a donation is appreciated)
</div>
</div>
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
<div class="camera_caption fadeFromBottom">
Camera slideshow provides many options <em>to customize your project</em> as more as possible
</div>
</div>
<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
<div class="camera_caption fadeFromBottom">
It supports captions, HTML elements and videos.
</div>
</div>
</div>
<!-- #camera_wrap_1 -->
</div>
Kiểu 3
Code CSS
<!--// meta slider CSS-->
<style type="text/css" id="wp-custom-css">
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin: 5px;
opacity: 0.7;
}
.nivo-controlNav .active img,
.nivo-controlNav img:hover {
opacity: 1;
}
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider.
Version: 1.3
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
.theme-default .nivoSlider {
position:relative;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 15px 0;
width: 100%;
z-index: 99;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(/wp-content/plugins/ml-slider/assets/sliders/nivoslider/themes/default/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(/wp-content/plugins/ml-slider/assets/sliders/nivoslider/themes/default/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
height: auto;
}
</style>
Code javascript
<script type='text/javascript'>
var metaslider_48 = function($) {
$('#metaslider_48').nivoSlider({
boxCols:7,
boxRows:5,
pauseTime:3000,
effect:"random",
controlNav:false,
directionNav:true,
pauseOnHover:false,
animSpeed:600,
prevText:"<",
nextText:">",
slices:15,
manualAdvance:false
});
};
var timer_metaslider_48 = function() {
var slider = !window.jQuery ? window.setTimeout(timer_metaslider_48, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_48, 1) : metaslider_48(window.jQuery);
};
timer_metaslider_48();
</script>
<script language='javascript'>
/*
* jQuery Nivo Slider v3.2
* http://nivo.dev7studios.com
*
* Copyright 2012, Dev7studios
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Meta Slider modifications: caption taken from 'data-title' attribute instead of 'title' attribute.
*/
(function(e){var t=function(t,n){var r=e.extend({},e.fn.nivoSlider.defaults,n);var i={currentSlide:0,currentImage:"",totalSlides:0,running:false,paused:false,stop:false,controlNavEl:false};var s=e(t);s.data("nivo:vars",i).addClass("nivoSlider");var o=s.children();o.each(function(){var t=e(this);var n="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");n=t}t=t.find("img:first")}var r=r===0?t.attr("width"):t.width(),s=s===0?t.attr("height"):t.height();if(n!==""){n.css("display","none")}t.css("display","none");i.totalSlides++});if(r.randomStart){r.startSlide=Math.floor(Math.random()*i.totalSlides)}if(r.startSlide>0){if(r.startSlide>=i.totalSlides){r.startSlide=i.totalSlides-1}i.currentSlide=r.startSlide}if(e(o[i.currentSlide]).is("img")){i.currentImage=e(o[i.currentSlide])}else{i.currentImage=e(o[i.currentSlide]).find("img:first")}if(e(o[i.currentSlide]).is("a")){e(o[i.currentSlide]).css("display","block")}var u=e("<img/>").addClass("nivo-main-image");u.attr("src",i.currentImage.attr("src")).show();s.append(u);e(window).resize(function(){s.children("img").width(s.width());u.attr("src",i.currentImage.attr("src"));u.stop().height("auto");e(".nivo-slice").remove();e(".nivo-box").remove()});s.append(e('<div class="nivo-caption"></div>'));var a=function(t){var n=e(".nivo-caption",s);if(i.currentImage.attr("data-title")!=""&&i.currentImage.attr("data-title")!=undefined){var r=i.currentImage.attr("data-title");if(r.substr(0,1)=="#")r=e(r).html();if(n.css("display")=="block"){setTimeout(function(){n.html(r)},t.animSpeed)}else{n.html(r);n.stop().fadeIn(t.animSpeed)}}else{n.stop().fadeOut(t.animSpeed)}};a(r);var f=0;if(!r.manualAdvance&&o.length>1){f=setInterval(function(){d(s,o,r,false)},r.pauseTime)}if(r.directionNav){s.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+r.prevText+'</a><a class="nivo-nextNav">'+r.nextText+"</a></div>");e(s).on("click","a.nivo-prevNav",function(){if(i.running){return false}clearInterval(f);f="";i.currentSlide-=2;d(s,o,r,"prev")});e(s).on("click","a.nivo-nextNav",function(){if(i.running){return false}clearInterval(f);f="";d(s,o,r,"next")})}if(r.controlNav){i.controlNavEl=e('<div class="nivo-controlNav"></div>');s.after(i.controlNavEl);for(var l=0;l<o.length;l++){if(r.controlNavThumbs){i.controlNavEl.addClass("nivo-thumbs-enabled");var c=o.eq(l);if(!c.is("img")){c=c.find("img:first")}if(c.attr("data-thumb"))i.controlNavEl.append('<a class="nivo-control" rel="'+l+'"><img src="'+c.attr("data-thumb")+'" alt="" /></a>')}else{i.controlNavEl.append('<a class="nivo-control" rel="'+l+'">'+(l+1)+"</a>")}}e("a:eq("+i.currentSlide+")",i.controlNavEl).addClass("active");e("a",i.controlNavEl).bind("click",function(){if(i.running)return false;if(e(this).hasClass("active"))return false;clearInterval(f);f="";u.attr("src",i.currentImage.attr("src"));i.currentSlide=e(this).attr("rel")-1;d(s,o,r,"control")})}if(r.pauseOnHover){s.hover(function(){i.paused=true;clearInterval(f);f=""},function(){i.paused=false;if(f===""&&!r.manualAdvance){f=setInterval(function(){d(s,o,r,false)},r.pauseTime)}})}s.bind("nivo:animFinished",function(){u.attr("src",i.currentImage.attr("src"));i.running=false;e(o).each(function(){if(e(this).is("a")){e(this).css("display","none")}});if(e(o[i.currentSlide]).is("a")){e(o[i.currentSlide]).css("display","block")}if(f===""&&!i.paused&&!r.manualAdvance){f=setInterval(function(){d(s,o,r,false)},r.pauseTime)}r.afterChange.call(this)});var h=function(t,n,r){if(e(r.currentImage).parent().is("a"))e(r.currentImage).parent().css("display","block");e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility","hidden").show();var i=e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").parent().is("a")?e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").parent().height():e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").height();for(var s=0;s<n.slices;s++){var o=Math.round(t.width()/n.slices);if(s===n.slices-1){t.append(e('<div class="nivo-slice" name="'+s+'"><img src="'+r.currentImage.attr("src")+'" style="position:absolute; width:'+t.width()+"px; height:auto; display:block !important; top:0; left:-"+(o+s*o-o)+'px;" /></div>').css({left:o*s+"px",width:t.width()-o*s+"px",height:i+"px",opacity:"0",overflow:"hidden"}))}else{t.append(e('<div class="nivo-slice" name="'+s+'"><img src="'+r.currentImage.attr("src")+'" style="position:absolute; width:'+t.width()+"px; height:auto; display:block !important; top:0; left:-"+(o+s*o-o)+'px;" /></div>').css({left:o*s+"px",width:o+"px",height:i+"px",opacity:"0",overflow:"hidden"}))}}e(".nivo-slice",t).height(i);u.stop().animate({height:e(r.currentImage).height()},n.animSpeed)};var p=function(t,n,r){if(e(r.currentImage).parent().is("a"))e(r.currentImage).parent().css("display","block");e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").width(t.width()).css("visibility","hidden").show();var i=Math.round(t.width()/n.boxCols),s=Math.round(e('img[src="'+r.currentImage.attr("src")+'"]',t).not(".nivo-main-image,.nivo-control img").height()/n.boxRows);for(var o=0;o<n.boxRows;o++){for(var a=0;a<n.boxCols;a++){if(a===n.boxCols-1){t.append(e('<div class="nivo-box" name="'+a+'" rel="'+o+'"><img src="'+r.currentImage.attr("src")+'" style="position:absolute; width:'+t.width()+"px; height:auto; display:block; top:-"+s*o+"px; left:-"+i*a+'px;" /></div>').css({opacity:0,left:i*a+"px",top:s*o+"px",width:t.width()-i*a+"px"}));e('.nivo-box[name="'+a+'"]',t).height(e('.nivo-box[name="'+a+'"] img',t).height()+"px")}else{t.append(e('<div class="nivo-box" name="'+a+'" rel="'+o+'"><img src="'+r.currentImage.attr("src")+'" style="position:absolute; width:'+t.width()+"px; height:auto; display:block; top:-"+s*o+"px; left:-"+i*a+'px;" /></div>').css({opacity:0,left:i*a+"px",top:s*o+"px",width:i+"px"}));e('.nivo-box[name="'+a+'"]',t).height(e('.nivo-box[name="'+a+'"] img',t).height()+"px")}}}u.stop().animate({height:e(r.currentImage).height()},n.animSpeed)};var d=function(t,n,r,i){var s=t.data("nivo:vars");if(s&&s.currentSlide===s.totalSlides-1){r.lastSlide.call(this)}if((!s||s.stop)&&!i){return false}r.beforeChange.call(this);if(!i){u.attr("src",s.currentImage.attr("src"))}else{if(i==="prev"){u.attr("src",s.currentImage.attr("src"))}if(i==="next"){u.attr("src",s.currentImage.attr("src"))}}s.currentSlide++;if(s.currentSlide===s.totalSlides){s.currentSlide=0;r.slideshowEnd.call(this)}if(s.currentSlide<0){s.currentSlide=s.totalSlides-1}if(e(n[s.currentSlide]).is("img")){s.currentImage=e(n[s.currentSlide])}else{s.currentImage=e(n[s.currentSlide]).find("img:first")}if(r.controlNav){e("a",s.controlNavEl).removeClass("active");e("a:eq("+s.currentSlide+")",s.controlNavEl).addClass("active")}a(r);e(".nivo-slice",t).remove();e(".nivo-box",t).remove();var o=r.effect,f="";if(r.effect==="random"){f=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","boxRandom","boxRain","boxRainReverse","boxRainGrow","boxRainGrowReverse");o=f[Math.floor(Math.random()*(f.length+1))];if(o===undefined){o="fade"}}if(r.effect.indexOf(",")!==-1){f=r.effect.split(",");o=f[Math.floor(Math.random()*f.length)];if(o===undefined){o="fade"}}if(s.currentImage.attr("data-transition")){o=s.currentImage.attr("data-transition")}s.running=true;var l=0,c=0,d="",m="",g="",y="";if(o==="sliceDown"||o==="sliceDownRight"||o==="sliceDownLeft"){h(t,r,s);l=0;c=0;d=e(".nivo-slice",t);if(o==="sliceDownLeft"){d=e(".nivo-slice",t)._reverse()}d.each(function(){var n=e(this);n.css({top:"0px"});if(c===r.slices-1){setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed,"",function(){t.trigger("nivo:animFinished")})},100+l)}else{setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed)},100+l)}l+=50;c++})}else if(o==="sliceUp"||o==="sliceUpRight"||o==="sliceUpLeft"){h(t,r,s);l=0;c=0;d=e(".nivo-slice",t);if(o==="sliceUpLeft"){d=e(".nivo-slice",t)._reverse()}d.each(function(){var n=e(this);n.css({bottom:"0px"});if(c===r.slices-1){setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed,"",function(){t.trigger("nivo:animFinished")})},100+l)}else{setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed)},100+l)}l+=50;c++})}else if(o==="sliceUpDown"||o==="sliceUpDownRight"||o==="sliceUpDownLeft"){h(t,r,s);l=0;c=0;var b=0;d=e(".nivo-slice",t);if(o==="sliceUpDownLeft"){d=e(".nivo-slice",t)._reverse()}d.each(function(){var n=e(this);if(c===0){n.css("top","0px");c++}else{n.css("bottom","0px");c=0}if(b===r.slices-1){setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed,"",function(){t.trigger("nivo:animFinished")})},100+l)}else{setTimeout(function(){n.animate({opacity:"1.0"},r.animSpeed)},100+l)}l+=50;b++})}else if(o==="fold"){h(t,r,s);l=0;c=0;e(".nivo-slice",t).each(function(){var n=e(this);var i=n.width();n.css({top:"0px",width:"0px"});if(c===r.slices-1){setTimeout(function(){n.animate({width:i,opacity:"1.0"},r.animSpeed,"",function(){t.trigger("nivo:animFinished")})},100+l)}else{setTimeout(function(){n.animate({width:i,opacity:"1.0"},r.animSpeed)},100+l)}l+=50;c++})}else if(o==="fade"){h(t,r,s);m=e(".nivo-slice:first",t);m.css({width:t.width()+"px"});m.animate({opacity:"1.0"},r.animSpeed*2,"",function(){t.trigger("nivo:animFinished")})}else if(o==="slideInRight"){h(t,r,s);m=e(".nivo-slice:first",t);m.css({width:"0px",opacity:"1"});m.animate({width:t.width()+"px"},r.animSpeed*2,"",function(){t.trigger("nivo:animFinished")})}else if(o==="slideInLeft"){h(t,r,s);m=e(".nivo-slice:first",t);m.css({width:"0px",opacity:"1",left:"",right:"0px"});m.animate({width:t.width()+"px"},r.animSpeed*2,"",function(){m.css({left:"0px",right:""});t.trigger("nivo:animFinished")})}else if(o==="boxRandom"){p(t,r,s);g=r.boxCols*r.boxRows;c=0;l=0;y=v(e(".nivo-box",t));y.each(function(){var n=e(this);if(c===g-1){setTimeout(function(){n.animate({opacity:"1"},r.animSpeed,"",function(){t.trigger("nivo:animFinished")})},100+l)}else{setTimeout(function(){n.animate({opacity:"1"},r.animSpeed)},100+l)}l+=20;c++})}else if(o==="boxRain"||o==="boxRainReverse"||o==="boxRainGrow"||o==="boxRainGrowReverse"){p(t,r,s);g=r.boxCols*r.boxRows;c=0;l=0;var w=0;var E=0;var S=[];S[w]=[];y=e(".nivo-box",t);if(o==="boxRainReverse"||o==="boxRainGrowReverse"){y=e(".nivo-box",t)._reverse()}y.each(function(){S[w][E]=e(this);E++;if(E===r.boxCols){w++;E=0;S[w]=[]}});for(var x=0;x<r.boxCols*2;x++){var T=x;for(var N=0;N<r.boxRows;N++){if(T>=0&&T<r.boxCols){(function(n,i,s,u,a){var f=e(S[n][i]);var l=f.width();var c=f.height();if(o==="boxRainGrow"||o==="boxRainGrowReverse"){f.width(0).height(0)}if(u===a-1){setTimeout(function(){f.animate({opacity:"1",width:l,height:c},r.animSpeed/1.3,"",function(){t.trigger("nivo:animFinished")})},100+s)}else{setTimeout(function(){f.animate({opacity:"1",width:l,height:c},r.animSpeed/1.3)},100+s)}})(N,T,l,c,g);c++}T--}l+=100}}};var v=function(e){for(var t,n,r=e.length;r;t=parseInt(Math.random()*r,10),n=e[--r],e[r]=e[t],e[t]=n);return e};var m=function(e){if(this.console&&typeof console.log!=="undefined"){console.log(e)}};this.stop=function(){if(!e(t).data("nivo:vars").stop){e(t).data("nivo:vars").stop=true;m("Stop Slider")}};this.start=function(){if(e(t).data("nivo:vars").stop){e(t).data("nivo:vars").stop=false;m("Start Slider")}};r.afterLoad.call(this);return this};e.fn.nivoSlider=function(n){return this.each(function(r,i){var s=e(this);if(s.data("nivoslider")){return s.data("nivoslider")}var o=new t(this,n);s.data("nivoslider",o)})};e.fn.nivoSlider.defaults={effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3e3,startSlide:0,directionNav:true,controlNav:true,controlNavThumbs:false,pauseOnHover:true,manualAdvance:false,prevText:"Prev",nextText:"Next",randomStart:false,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};e.fn._reverse=[].reverse})(jQuery)
</script>
Code hiển thị slider
<!-- meta slider -->
<div class='metaslider metaslider-nivo metaslider-48 ml-slider' style='width: 100%;'>
<div id='metaslider_container_48'>
<div class='slider-wrapper theme-default'>
<div class='ribbon'/>
<div class='nivoSlider' id='metaslider_48'>
<a href='#' target='_blank'><img alt='' class='slider-48 slide-264' data-no-lazy='1' height='350' src='hinh1' width='0'/></a>
<a href='#' target='_blank'><img alt='' class='slider-48 slide-265' data-no-lazy='1' height='350' src='hinh2' width='0'/></a>
<a href='#' target='_blank'><img alt='' class='slider-48 slide-266' data-no-lazy='1' height='350' src='hinh3' width='0'/></a>
<a href='#' target='_blank'><img alt='' class='slider-48 slide-267' data-no-lazy='1' height='350' src='hinh4' width='0'/></a>
</div>
</div>
</div>
</div>
<!--// meta slider-->
Lưu ý: ai biết rành rồi thì cứ thế mà làm, còn ai chưa biết gì thì có thể tìm trên anh gồ hoặc để lại comment, mình không giỏi nhưng biết gì là chỉ hết. không giấu diếm gì, vì tính mình là vậy