3D Animated Image Slider

Add a 3D Animated Image Slider Transitions on website or blogger. Let us follow the below steps.
Step 1: Go to Blogger Click the Dashboard then
Step 2: Now Click on Template->Edit HTML-> Proceed
Step 3: Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 4: Copy the code from below and Paste it  Before/above ]]></b:skin>

 article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


audio:not([controls]) {
    display: none;
    height: 0;
}


[hidden] {
    display: none;
}


html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}


html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}


body {
    margin: 0;
}


a:focus {
    outline: thin dotted;
}


a:hover,
a:active {
    outline: 0;
}


h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

p,
pre {
    margin: 1em 0;
}

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}


img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}


svg:not(:root) {
    overflow: hidden;
}


figure {
    margin: 0;
 -webkit-margin-before: 0;
 -webkit-margin-after: 0;
 -webkit-margin-start: 0;
 -webkit-margin-end: 0;
}


form {
    margin: 0;
}


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}


legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}


button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}


button,
input {
    line-height: normal; /* 1 */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}


button[disabled],
input[disabled] {
    cursor: default;
}


input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}


input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}


button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* General Demo Style */
body{
 font-family: 'Open Sans Condensed','Arial Narrow', serif;
 background: #fff url(../images/bg.jpg) fixed no-repeat top center;
 font-weight: 400;
 font-size: 15px;
 color: #333;
 -webkit-font-smoothing: antialiased;
 overflow-y: scroll;
 overflow-x: hidden;
}
a{
 color: #555;
 text-decoration: none;
}
.container{
 width: 100%;
 position: relative;
}
.clr{
 clear: both;
 padding: 0;
 height: 0;
 margin: 0;
}
.main{
 width: 90%;
 margin: 0 auto;
 position: relative;
}
.container > header{
 margin: 10px;
 padding: 20px 10px 10px 10px;
 position: relative;
 display: block;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
 font-size: 34px;
 line-height: 34px;
 margin: 0;
 position: relative;
 font-weight: 300;
 color: #666;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
.container > header h2{
 font-size: 14px;
 font-weight: 300;
 margin: 0;
 padding: 15px 0 5px 0;
 color: #888;
 font-family: Cambria, Georgia, serif;
 font-style: italic;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
/* Header Style */
.Blogsitedesigns-top{
 line-height: 24px;
 font-size: 11px;
 background: #fff;
 background: rgba(255, 255, 255, 0.3);
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 font-family: Cambria, Georgia, serif;
 box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.Blogsitedesigns-top a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #333;
 display: inline-block;
}
.Blogsitedesigns-top a:hover{
 background: rgba(255,255,255,0.6);
}
.Blogsitedesigns-top span.right{
 float: right;
}
.Blogsitedesigns-top span.right a{
 float: left;
 display: block;
}

.support-note span{
 color: #ac375d;
 font-size: 16px;
 display: none;
 font-weight: bold;
 text-align: center;
 padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions,
.no-generatedcontent .support-note span.no-generatedcontent{
 display: block;
}
 .fs-container {
 margin: 20px auto 50px auto;
 position: relative;
 width: 40%;
 padding: 0 15%;
 max-width: 700px;
 min-width: 220px;
 height: 500px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}
.fs-container:before {
 content: '';
 position: absolute;
 bottom: -40px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-2P3Le87IvEJ6DWaVSXCL__D20hexOWdE84yhHPts-PJQq75iNRsX46uHPzLQ3TBGjvz-yNB7BZIz7knWuwnXhHHLywYF-YMCzV4mNfVGmZjQuzT-K5sIDJ-sh7oOWpQVPoWtq3wCQ8/s1600/shadow.png) no-repeat center center;
 height: 90px;
 width: 90%;
 left: 5%;
 opacity: 0.8;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 background-size: 100% 100%;
}

.fs-wrapper {
 width: 100%;
 height: 100%;
 position: relative;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 -o-perspective: 1000px;
 -ms-perspective: 1000px;
 perspective: 1000px;
}

.fs-slider{
 width: 100%;
 height: 100%;
 position: absolute;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 pointer-events: none;
}

.fs-block {
 margin: 0;
 position: absolute;
 width: 70%;
 height: 100%;
 left: 15%;
 pointer-events: auto;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.fs-block:nth-child(1) {
 -webkit-transform-origin: top right;
 -webkit-transform: translateX(-100%) rotateY(-35deg);
 -moz-transform-origin: top right;
 -moz-transform: translateX(-100%) rotateY(-35deg);
 -o-transform-origin: top right;
 -o-transform: translateX(-100%) rotateY(-35deg);
 -ms-transform-origin: top right;
 -ms-transform: translate(-100%);
 transform-origin: top right;
 transform: translateX(-100%) rotateY(-35deg);
}
.no-touch .fs-block:nth-child(1):hover {
 -webkit-transform: translateX(-100%) rotateY(-30deg);
 -o-transform: translateX(-100%) rotateY(-30deg);
 transform: translateX(-100%) rotateY(-30deg);
}

.fs-block:nth-child(2) {
 z-index: 100;
}

.fs-block:nth-child(3) {
 -webkit-transform-origin: top left;
 -webkit-transform: translateX(100%) rotateY(35deg);
 -moz-transform-origin: top left;
 -moz-transform: translateX(100%) rotateY(35deg);
 -o-transform-origin: top left;
 -o-transform: translateX(100%) rotateY(35deg);
 -ms-transform-origin: top left;
 -ms-transform: translate(100%);
 transform-origin: top left;
 transform: translateX(100%) rotateY(35deg);
}

.no-touch .fs-block:nth-child(3):hover {
 -webkit-transform: translateX(100%) rotateY(30deg);
 -o-transform: translateX(100%) rotateY(30deg);
 transform: translateX(100%) rotateY(30deg);
}

.fs-block:after{
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 1000;
 pointer-events: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border-left: 1px solid rgba(119,119,119,1);
 border-right: 1px solid rgba(119,119,119,1);
 left: -1px;
}

/* Borders are only needed if we have the 3d look */
.no-csstransforms3d .fs-block:after {
 border: none;
}

.fs-block:nth-child(1):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.2)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
}

.fs-block:nth-child(2):after {
 opacity: 0.8;
 background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 21%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 70%, rgba(0,0,0,0.12) 81%, rgba(0,0,0,0.5) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(21%,rgba(0,0,0,0.12)), color-stop(31%,rgba(0,0,0,0.03)), color-stop(50%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0.03)), color-stop(81%,rgba(0,0,0,0.12)), color-stop(100%,rgba(0,0,0,0.5)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
}

.fs-block:nth-child(3):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.65)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
}

.fs-block figure {
 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: 1;
}

.fs-block figure:first-child{
 z-index: 10;
}

.fs-block figure img {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
}

.fs-block figcaption {
 padding: 0 20px;
 margin: 0;
 position: absolute;
 width: 100%;
 top: 25%;
 background: rgba(0,0,0,0.4);
 overflow: hidden;
 height: 0%;
 opacity: 0;
 text-align: center;
 -webkit-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -o-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 transition: all 700ms cubic-bezier(0, 0, .15, 1);
}

.fs-block figcaption.fs-transition {
 height: 35%;
 opacity: 1;
}

.fs-block figcaption h3 {
 font-size: 40px;
 line-height: 40px;
 margin: 0;
 padding: 20px 0;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 font-family: 'Prata', serif;
 font-weight: normal;
}

.fs-block figcaption p {
 color: #fff;
 padding: 20px 0;
 margin: 0;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 border-top: 1px solid rgba(255,255,255,0.2);
 box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.fs-navigation {
 position: absolute;
 z-index: 2000;
 bottom: 10px;
 right: 15%;
 margin-right: 15px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.fs-navigation span {
 float: left;
 width: 26px;
 height: 26px;
 border-radius: 4px;
 text-indent: -90000px;
 cursor: pointer;
 opacity: 0.6;
 margin-right: 3px;
 background: rgba(0,0,0,0.4) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9toQaBHyCCrAE_m-NwycIcrrsd-vA-0LhsNiisdgB7TWgb5YrxWw4yZT8IvADT6MFmnWauCAp-yHOsRGmwFhjfJkabYNmSHrxQ-Mz2ad7pjQDMCDamn8tUXHmhksy8PB93zjxlPbEpw/s1600/arrow.png) no-repeat 50% 50%;
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 transition: all 0.3s linear;
 pointer-events: auto;
}

.fs-navigation span:nth-child(2) {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
}

.fs-navigation span:hover{
 opacity: 1;
}

/* Transitions */
.fs-block:nth-child(1) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
}
.fs-block:nth-child(2) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
}
.fs-block:nth-child(3) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 transition: width 900ms cubic-bezier(0, 0, .15, 1);
}

/* Media Queries */

@media screen and (max-width: 1024px) {
 .fs-block figcaption h3 {
  font-size: 26px;
 }
}

@media screen and (max-width: 768px) {
 .fs-block figcaption {
  padding: 0 10px;
 }
 .fs-block figcaption h3 {
  font-size: 16px;
  padding: 10px 0;
 }
 .fs-block figcaption p {
  font-size: 13px;
 }
}

Step 5: Now Save Template then
Step 6: Now Find this code </head> by pressing Ctrl + F
Step 7: Copy the code from below and Paste it  Before/above </head> 

<script type="text/javascript">
  ;window.Modernizr=function(a,b,c){function A(a){j.cssText=a}function B(a,b){return A(n.join(a+";")+(b||""))}function C(a,b){return typeof a===b}function D(a,b){return!!~(""+a).indexOf(b)}function E(a,b){for(var d in a){var e=a[d];if(!D(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function F(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:C(f,"function")?f.bind(d||b):f}return!1}function G(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return C(b,"string")||C(b,"undefined")?E(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),F(e,b,c))}var d="2.6.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={},s={},t={},u=[],v=u.slice,w,x=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},y={}.hasOwnProperty,z;!C(y,"undefined")&&!C(y.call,"undefined")?z=function(a,b){return y.call(a,b)}:z=function(a,b){return b in a&&C(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=v.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e}),r.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:x(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},r.csstransforms=function(){return!!G("transform")},r.csstransforms3d=function(){var a=!!G("perspective");return a&&"webkitPerspective"in g.style&&x("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},r.csstransitions=function(){return G("transition")},r.generatedcontent=function(){var a;return x(['#modernizr:after{content:"',l,'";visibility:hidden}'].join(""),function(b){a=b.offsetHeight>=1}),a};for(var H in r)z(r,H)&&(w=H.toLowerCase(),e[w]=r[H](),u.push((e[w]?"":"no-")+w));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)z(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},A(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.testProp=function(a){return E([a])},e.testAllProps=G,e.testStyles=x,e.prefixed=function(a,b,c){return b?G(a,b,c):G(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
  </script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script type="text/javascript">
  ;( function( $, window, undefined ) {

 'use strict';

 var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

 $.fn.imagesLoaded = function( callback ) {
  var $this = this,
   deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
   hasNotify = $.isFunction(deferred.notify),
   $images = $this.find('img').add( $this.filter('img') ),
   loaded = [],
   proper = [],
   broken = [];

  function doneLoading() {
   var $proper = $(proper),
    $broken = $(broken);

   if ( deferred ) {
    if ( broken.length ) {
     deferred.reject( $images, $proper, $broken );
    } else {
     deferred.resolve( $images );
    }
   }

   if ( $.isFunction( callback ) ) {
    callback.call( $this, $images, $proper, $broken );
   }
  }

  function imgLoaded( img, isBroken ) {
   // don't proceed if BLANK image, or image is already loaded
   if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
    return;
   }

   // store element in loaded images array
   loaded.push( img );

   // keep track of broken and properly loaded images
   if ( isBroken ) {
    broken.push( img );
   } else {
    proper.push( img );
   }

   // cache image and its state for future calls
   $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );

   // trigger deferred progress method if present
   if ( hasNotify ) {
    deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
   }

   // call doneLoading and clean listeners if all images are loaded
   if ( $images.length === loaded.length ){
    setTimeout( doneLoading );
    $images.unbind( '.imagesLoaded' );
   }
  }

  // if no images, trigger immediately
  if ( !$images.length ) {
   doneLoading();
  } else {
   $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){
    // trigger imgLoaded
    imgLoaded( event.target, event.type === 'error' );
   }).each( function( i, el ) {
    var src = el.src;

    var cached = $.data( el, 'imagesLoaded' );
    if ( cached && cached.src === src ) {
     imgLoaded( el, cached.isBroken );
     return;
    }

    if ( el.complete && el.naturalWidth !== undefined ) {
     imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
     return;
    }

    if ( el.readyState || el.complete ) {
     el.src = BLANK;
     el.src = src;
    }
   });
  }

  return deferred ? deferred.promise( $this ) : $this;
 };

 var $event = $.event,
 $special,
 resizeTimeout;

 $special = $event.special.debouncedresize = {
  setup: function() {
   $( this ).on( "resize", $special.handler );
  },
  teardown: function() {
   $( this ).off( "resize", $special.handler );
  },
  handler: function( event, execAsap ) {
   // Save the context
   var context = this,
    args = arguments,
    dispatch = function() {
     // set correct event type
     event.type = "debouncedresize";
     $event.dispatch.apply( context, args );
    };

   if ( resizeTimeout ) {
    clearTimeout( resizeTimeout );
   }

   execAsap ?
    dispatch() :
    resizeTimeout = setTimeout( dispatch, $special.threshold );
  },
  threshold: 50
 };

 // global
 var $window    = $( window ),
  Modernizr   = window.Modernizr;

 $.ImgSlider    = function( options, element ) {
 
  var _self = this;

  this.$el = $( element ).hide();
 
  // preload images
  this.$el.imagesLoaded( function() {

   _self.$el.show();
   _self._init( options );

  } );
 
 };

 $.ImgSlider.defaults = {
  autoplay : false,
  interval : 4000
 };

 $.ImgSlider.prototype = {

  _init    : function( options ) {
  
   // options
   this.options  = $.extend( true, {}, $.ImgSlider.defaults, options );

   this.current   = 0;
  
   var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'  : 'transitionend',
    'OTransition'  : 'oTransitionEnd',
    'msTransition'  : 'MSTransitionEnd',
    'transition'  : 'transitionend'
   };
   this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

   // the initial elements
   this.$initElems  = this.$el.children( 'figure' );
   // total number of elements
   this.initElemsCount = this.$initElems.length;
  
   if( this.initElemsCount < 3 ) {

    return false;

   }

   // build layout
   this._layout();
   // init events
   this._initEvents();

   // autoplay on
   if( this.options.autoplay ) {
  
    this._startSlideshow();
  
   }

  },
  _layout    : function() {

   this.$initElems.wrapAll( '<div class="fs-temp"></div>' ).hide();

   this.$initElems
    .filter( ':lt(3)' )
    .clone()
    .show()
    .prependTo( this.$el )
    .wrap( '<div class="fs-block"></div>' );

   this.$el
    .wrap( '<section class="fs-container"></section>' )
    .wrap( '<div class="fs-wrapper"></div>' );

   this.$blocks = this.$el.children( 'div.fs-block' );
  
   // cache the 3 main blocks
   this.$blockL = this.$blocks.eq( 0 );
   this.$blockC = this.$blocks.eq( 1 );
   this.$blockR = this.$blocks.eq( 2 );

   this.$blockC.find( 'figcaption' ).addClass( 'fs-transition' );

   // all items
   this.$temp  = this.$el.find( 'div.fs-temp' );

   // resize images
   this._resizeBlocks();

   // add navigation if needed
   if( this.initElemsCount > 3 ) {

    var $nav = $( '<nav class="fs-navigation"><span>Previous</span><span>Next</span></nav>' ).appendTo( this.$el.parent() );

    // next and previous
    this.$navPrev = $nav.find( 'span:first' );
    this.$navNext = $nav.find( 'span:last' );

    this._initNavigationEvents();

   }

  },
  // gets the image size and position in order to make it fullscreen and centered.
        _getImageDim   : function( src, limits ) {

         var img  = new Image();

   img.src  = src;

   var l_w  = limits.width,
    l_h  = limits.height,
    r_w  = l_h / l_w,
    i_w  = img.width,
    i_h  = img.height,
    r_i  = i_h / i_w,
    new_w, new_h, new_left, new_top;

   if( r_w > r_i ) {

    new_h = l_h;
    new_w = l_h / r_i;

   }
   else {

    new_h = l_w * r_i;
    new_w = l_w;

   }

   return {
    width : new_w,
    height : new_h,
    left : ( l_w - new_w ) / 2,
    top  : ( l_h - new_h ) / 2
   };

  },
  _initNavigationEvents : function() {

   var _self = this;

   this.$navPrev.on( 'click.imgslider', function() {

    if( _self.options.autoplay ) {
   
     clearTimeout( _self.slideshow );
     _self.options.autoplay = false;
   
    }

    _self._navigate( 'left' );

   } );
   this.$navNext.on( 'click.imgslider', function() {

    if( _self.options.autoplay ) {
   
     clearTimeout( _self.slideshow );
     _self.options.autoplay = false;
   
    }
   
    _self._navigate( 'right' );

   } );

  },
  _initEvents    : function() {

   var _self = this;

   $window.on( 'debouncedresize.imgslider', function() {

    _self._resizeBlocks();

   } );

  },
  // resize the images
  _resizeBlocks   : function() {

   var _self = this;

   this.$blocks.each( function( i ) {

    var $el  = $( this ).children( 'figure' ),
     $img = $el.children( 'img' ),
     dim  = _self._getImageDim( $img.attr( 'src' ), { width : $el.width(), height : $el.height() } );

    // save the image dimentions
    switch( i ) {
     case 0 : _self.$blockL.data( 'imgstyle', dim ); break;
     case 1 : _self.$blockC.data( 'imgstyle', dim ); break;
     case 2 : _self.$blockR.data( 'imgstyle', dim ); break;
    };

    // apply style
    $img.css( dim );

   } );

  },
  _navigate    : function( dir ) {

   if( this.isAnimating === true ) {

    return false;

   }

   this.isAnimating = true;

   var _self = this,
    $items = this.$temp.children(),
    LIndex, CIndex, RIndex;
  
   this.$blocks.find( 'figcaption' ).hide().css( 'transition', 'none' ).removeClass( 'fs-transition' );

   if( dir === 'right' ) {

    LIndex = this.current + 1;
    CIndex = this.current + 2;
    RIndex = this.current + 3;
   
    if( LIndex >= this.initElemsCount ) {

     LIndex -= this.initElemsCount

    }

    if( CIndex >= this.initElemsCount ) {

     CIndex -= this.initElemsCount

    }

   }
   else if( dir === 'left' ) {

    LIndex = this.current - 1;
    CIndex = this.current;
    RIndex = this.current + 1;
   
    if( LIndex < 0 ) {

     LIndex = this.initElemsCount - 1

    }

   }
   
    if( RIndex >= this.initElemsCount ) {

    RIndex -= this.initElemsCount

   }

   var $elL = $items.eq( LIndex ).clone().show(),
    $elC = $items.eq( CIndex ).clone().show(),
    $elR = $items.eq( RIndex ).clone().show();

   // resize images
   $elL.children( 'img' ).css( this.$blockL.data( 'imgstyle' ) );
   $elC.children( 'img' ).css( this.$blockC.data( 'imgstyle' ) );
   $elR.children( 'img' ).css( this.$blockR.data( 'imgstyle' ) );
  
   this.$blockL.append( $elL );
   this.$blockC.append( $elC );
   this.$blockR.append( $elR );

   // now show new images

   var $slides = this.$blocks.find( 'figure:first' ).css( 'width', '0%');
  
   if( Modernizr.csstransitions ) {

    $slides.on( this.transEndEventName, function( event ) {

     var $this   = $( this ),
      blockIdx = $this.parent().index('');
    
     _self._slideEnd( dir, blockIdx, $elC );

     $this.off( _self.transEndEventName ).remove();

    } );

   }
   else {

    $slides.each( function() {

    var $this   = $( this ),
     blockIdx = $this.parent().index('');

     _self._slideEnd( dir, blockIdx, $elC );

    } );

    this._slideEnd();

   }

  },
  _slideEnd    : function( dir, blockIdx, $main ) {

    if( blockIdx === 0 ) {

    if( this.current === this.initElemsCount - 1 && dir === 'right' ) {

     this.current = 0;

     }
    else if( this.current === 0 && dir === 'left' ) {

     this.current = this.initElemsCount - 1;

     }
     else {
     
     ( dir === 'right' ) ? ++this.current : --this.current;
    
     }

    this.isAnimating = false;

    }
    else if( blockIdx === 1 ) {

    $main.find( 'figcaption' ).addClass( 'fs-transition' );

    }

  },
  // auto slideshow
  _startSlideshow   : function() {
 
   var _self = this;
  
   this.slideshow = setTimeout( function() {
   
    _self._navigate( 'right' );
   
    if( _self.options.autoplay ) {
   
     _self._startSlideshow();
   
  }
  
   }, this.options.interval );
 
  },

 };

 var logError  = function( message ) {

  if ( window.console ) {

   window.console.error( message );
 
  }

 };

 $.fn.imgslider  = function( options ) {
 
  if ( typeof options === 'string' ) {
  
   var args = Array.prototype.slice.call( arguments, 1 );
  
   this.each(function() {
  
    var instance = $.data( this, 'imgslider' );
   
    if ( !instance ) {

     logError( "cannot call methods on imgslider prior to initialization; " +
     "attempted to call method '" + options + "'" );
     return;
   
    }
   
    if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {

     logError( "no such method '" + options + "' for imgslider instance" );
     return;
   
    }
   
    instance[ options ].apply( instance, args );
  
   });
 
  }
  else {
 
   this.each(function() {
   
    var instance = $.data( this, 'imgslider' );
   
    if ( instance ) {

     instance._init();
   
    }
    else {

     $.data( this, 'imgslider', new $.ImgSlider( options, this ) );
   
    }

   });
 
  }
 
  return this;
 
 };

} )( jQuery, window );
  </script>
  <script type="text/javascript">
   $(function() {

    $( '#fs-slider' ).imgslider();

   });
  </script> 

 Step 8: Click the Layout and Add a Gadget then
Step 9: Click the HTML/JavaScript then
Step 10: Copy the Below code And Paste on it.

<div class="container">
<div class="main">
  
    <div class="fs-slider" id="fs-slider">
    
     <figure>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJCi45eob41iHH8TaWAf_pOGJgc4D7r7G6M_DCFdS2-IOZaa2qdiSRZGcn0BjmWHJudEJlMm1xmb82Bya0GUFUkHpPKOYRdr0COwLeXeBUoMIosqOp_yMF6_UYSLH8UH9rSu5THL6vAI/s1600/1.jpg" alt="image01" />
      <figcaption>
       <h3>Eloquence</h3>
       <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
      </figcaption>
     </figure>
    
     <figure>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtojxB5XoT4MM7lqv9CvRYu-4P2aDsZfsFFwmm6oqceeaE7rRP6FcvNuI8hXLnhhfX_4ZxqK3n9uNN5lqLDzYxzOM6Rzp-Lv9hayHrhtE9FF7ElhjTUMOSpyZa7i3DJST8aUQTNWQCy9U/s1600/2.jpg" alt="image02" />
      <figcaption>
       <h3>Quintessential</h3>
       <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
      </figcaption>
     </figure>
    
     <figure>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaf565wfXtjl3CteocVPP9ZCu7VZVkt1p-xbPcrClXvobvj4lwG58x-th9sciPPAWJe9WBEusEOny0_MjqZrdd-sk3oGYxmOTNCoJcs_WUt6SmENWZFOYmfSrxN4R2urDoPCsxtn5MpaA/s1600/3.jpg" alt="image03" />
      <figcaption>
       <h3>Surreptitious</h3>
       <p>Truffaut iphone flexitarian, banh mi thundercats cliche wolf biodiesel gastropub. </p>
      </figcaption>
     </figure>
    
     <figure>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1YKgcDzUT1luMTirmpy4vJu7b02T1dbfb1GASDYd7MGfkAyPAJFaSNno4B_DrF5LKCf0SsIrvlQgmhCPhicwbtyTEhFDFjKc_L_uOTOBnyjtrN-ovxdzJqqsTAXReRrYESBLJS50Ga0/s1600/4.jpg" alt="image04" />
      <figcaption>
       <h3>Imbroglio</h3>
       <p>Scenester fixie pickled, shoreditch fugiat enim craft beer retro mustache.</p>
      </figcaption>
     </figure>
    
     <figure>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMyZW4uQHwJI1VtixWJQsgMP1LsGNhNXsACSlGKGM9Q2ewAnb4ttK3gdleoQiXf-bJ2igCwuN7hbdv7AQJt38Er_lI1u8Xq1wbC1l578z0Iu0SveLgb912yvBFfSMIacDRgiJYGWhStM/s1600/5.jpg" alt="image05" />
      <figcaption>
       <h3>Lissome</h3>
       <p>Aute sunt aliqua do sapiente. Food truck ut sustainable thundercats four loko.</p>
      </figcaption>
     </figure>
    
    </div><!-- /fs-slider -->
</div>
</div> 

Step 11: Change the Red Colored Images Link with your Image.     
Step 12: Change the Green Colored Name with your Name.     
Step 13: Save it and It will works.
 

Download

3D Animated Image Slider

323 KB

Demo

3D Animated Image Slider

View a Sample