css3 - Create a 3D Slideshow with jquery -

i'm looking create 3d slideshow or carousel through jquery, css, , html. want have http://www.masterslider.com/features/templates/3d-flow-carousel/

it nice if can include reflection on images well. plan put 3-5 carousel.

here code

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">   <!-- indicators -->   <ol class="carousel-indicators">     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>     <li data-target="#carousel-example-generic" data-slide-to="1"></li>     <li data-target="#carousel-example-generic" data-slide-to="2"></li>   </ol>    <!-- wrapper slides -->   <div class="carousel-inner">     <div class="item active">       <img src="http://placehold.it/1200x315" alt="...">       <div class="carousel-caption">           <h3>caption text</h3>       </div>     </div>     <div class="item">       <img src="http://placehold.it/1200x315" alt="...">       <div class="carousel-caption">           <h3>caption text</h3>       </div>     </div>     <div class="item">       <img src="http://placehold.it/1200x315" alt="...">       <div class="carousel-caption">           <h3>caption text</h3>       </div>     </div>   </div>    <!-- controls -->   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">     <span class="glyphicon glyphicon-chevron-left"></span>   </a>   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">     <span class="glyphicon glyphicon-chevron-right"></span>   </a> </div> <!-- carousel --> 

css

.carousel {   position: relative; } .carousel-inner {   position: relative;   width: 100%;   overflow: hidden; } .carousel-inner > .item {   position: relative;   display: none;   -webkit-transition: .6s ease-in-out left;        -o-transition: .6s ease-in-out left;           transition: .6s ease-in-out left; } .carousel-inner > .item > img, .carousel-inner > .item > > img {   line-height: 1; } @media , (transform-3d), (-webkit-transform-3d) {   .carousel-inner > .item {     -webkit-transition: -webkit-transform .6s ease-in-out;          -o-transition:      -o-transform .6s ease-in-out;             transition:         transform .6s ease-in-out;      -webkit-backface-visibility: hidden;             backface-visibility: hidden;     -webkit-perspective: 1000;             perspective: 1000;   }   .carousel-inner > .item.next,   .carousel-inner > .item.active.right {     left: 0;     -webkit-transform: translate3d(100%, 0, 0);             transform: translate3d(100%, 0, 0);   }   .carousel-inner > .item.prev,   .carousel-inner > .item.active.left {     left: 0;     -webkit-transform: translate3d(-100%, 0, 0);             transform: translate3d(-100%, 0, 0);   }   .carousel-inner > .item.next.left,   .carousel-inner > .item.prev.right,   .carousel-inner > .item.active {     left: 0;     -webkit-transform: translate3d(0, 0, 0);             transform: translate3d(0, 0, 0);   } } .carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {   display: block; } .carousel-inner > .active {   left: 0; } .carousel-inner > .next, .carousel-inner > .prev {   position: absolute;   top: 0;   width: 100%; } .carousel-inner > .next {   left: 100%; } .carousel-inner > .prev {   left: -100%; } .carousel-inner > .next.left, .carousel-inner > .prev.right {   left: 0; } .carousel-inner > .active.left {   left: -100%; } .carousel-inner > .active.right {   left: 100%; } .carousel-control {   position: absolute;   top: 0;   bottom: 0;   left: 0;   width: 15%;   font-size: 20px;   color: #fff;   text-align: center;   text-shadow: 0 1px 2px rgba(0, 0, 0, .6);   filter: alpha(opacity=50);   opacity: .5; } .carousel-control.left {   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);   background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001)));   background-image:         linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#80000000', endcolorstr='#00000000', gradienttype=1);   background-repeat: repeat-x; } .carousel-control.right {   right: 0;   left: auto;   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);   background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));   background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);   filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#00000000', endcolorstr='#80000000', gradienttype=1);   background-repeat: repeat-x; } .carousel-control:hover, .carousel-control:focus {   color: #fff;   text-decoration: none;   filter: alpha(opacity=90);   outline: 0;   opacity: .9; } .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {   position: absolute;   top: 50%;   z-index: 5;   display: inline-block; } .carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {   left: 50%;   margin-left: -10px; } .carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {   right: 50%;   margin-right: -10px; } .carousel-control .icon-prev, .carousel-control .icon-next {   width: 20px;   height: 20px;   margin-top: -10px;   font-family: serif;   line-height: 1; } .carousel-control .icon-prev:before {   content: '\2039'; } .carousel-control .icon-next:before {   content: '\203a'; } .carousel-indicators {   position: absolute;   bottom: 10px;   left: 50%;   z-index: 15;   width: 60%;   padding-left: 0;   margin-left: -30%;   text-align: center;   list-style: none; } .carousel-indicators li {   display: inline-block;   width: 10px;   height: 10px;   margin: 1px;   text-indent: -999px;   cursor: pointer;   background-color: #000 \9;   background-color: rgba(0, 0, 0, 0);   border: 1px solid #fff;   border-radius: 10px; } .carousel-indicators .active {   width: 12px;   height: 12px;   margin: 0;   background-color: #fff; } .carousel-caption {   position: absolute;   right: 15%;   bottom: 20px;   left: 15%;   z-index: 10;   padding-top: 20px;   padding-bottom: 20px;   color: #fff;   text-align: center;   text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .carousel-caption .btn {   text-shadow: none; } @media screen , (min-width: 768px) {   .carousel-control .glyphicon-chevron-left,   .carousel-control .glyphicon-chevron-right,   .carousel-control .icon-prev,   .carousel-control .icon-next {     width: 30px;     height: 30px;     margin-top: -15px;     font-size: 30px;   }   .carousel-control .glyphicon-chevron-left,   .carousel-control .icon-prev {     margin-left: -15px;   }   .carousel-control .glyphicon-chevron-right,   .carousel-control .icon-next {     margin-right: -15px;   }   .carousel-caption {     right: 20%;     left: 20%;     padding-bottom: 30px;   }   .carousel-indicators {     bottom: 20px;   } } 

script

+function ($) {   'use strict';    // carousel class definition   // =========================    var carousel = function (element, options) {     this.$element    = $(element)     this.$indicators = this.$element.find('.carousel-indicators')     this.options     = options     this.paused      = null     this.sliding     = null     this.interval    = null     this.$active     = null     this.$items      = null      this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))      this.options.pause == 'hover' && !('ontouchstart' in document.documentelement) && this.$element       .on('mouseenter.bs.carousel', $.proxy(this.pause, this))       .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))   }    carousel.version  = '3.3.4'    carousel.transition_duration = 600    carousel.defaults = {     interval: 5000,     pause: 'hover',     wrap: true,     keyboard: true   }    carousel.prototype.keydown = function (e) {     if (/input|textarea/i.test(e.target.tagname)) return     switch (e.which) {       case 37: this.prev(); break       case 39: this.next(); break       default: return     }      e.preventdefault()   }    carousel.prototype.cycle = function (e) {     e || (this.paused = false)      this.interval && clearinterval(this.interval)      this.options.interval       && !this.paused       && (this.interval = setinterval($.proxy(this.next, this), this.options.interval))      return   }    carousel.prototype.getitemindex = function (item) {     this.$items = item.parent().children('.item')     return this.$items.index(item || this.$active)   }    carousel.prototype.getitemfordirection = function (direction, active) {     var activeindex = this.getitemindex(active)     var willwrap = (direction == 'prev' && activeindex === 0)                 || (direction == 'next' && activeindex == (this.$items.length - 1))     if (willwrap && !this.options.wrap) return active     var delta = direction == 'prev' ? -1 : 1     var itemindex = (activeindex + delta) % this.$items.length     return this.$items.eq(itemindex)   }    carousel.prototype.to = function (pos) {     var        =     var activeindex = this.getitemindex(this.$active = this.$element.find('.item.active'))      if (pos > (this.$items.length - 1) || pos < 0) return      if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"     if (activeindex == pos) return this.pause().cycle()      return this.slide(pos > activeindex ? 'next' : 'prev', this.$items.eq(pos))   }    carousel.prototype.pause = function (e) {     e || (this.paused = true)      if (this.$element.find('.next, .prev').length && $.support.transition) {       this.$element.trigger($.support.transition.end)       this.cycle(true)     }      this.interval = clearinterval(this.interval)      return   }    carousel.prototype.next = function () {     if (this.sliding) return     return this.slide('next')   }    carousel.prototype.prev = function () {     if (this.sliding) return     return this.slide('prev')   }    carousel.prototype.slide = function (type, next) {     var $active   = this.$element.find('.item.active')     var $next     = next || this.getitemfordirection(type, $active)     var iscycling = this.interval     var direction = type == 'next' ? 'left' : 'right'     var      =      if ($next.hasclass('active')) return (this.sliding = false)      var relatedtarget = $next[0]     var slideevent = $.event('slide.bs.carousel', {       relatedtarget: relatedtarget,       direction: direction     })     this.$element.trigger(slideevent)     if (slideevent.isdefaultprevented()) return      this.sliding = true      iscycling && this.pause()      if (this.$indicators.length) {       this.$indicators.find('.active').removeclass('active')       var $nextindicator = $(this.$indicators.children()[this.getitemindex($next)])       $nextindicator && $nextindicator.addclass('active')     }      var slidevent = $.event('slid.bs.carousel', { relatedtarget: relatedtarget, direction: direction }) // yes, "slid"     if ($.support.transition && this.$element.hasclass('slide')) {       $next.addclass(type)       $next[0].offsetwidth // force reflow       $active.addclass(direction)       $next.addclass(direction)       $active         .one('bstransitionend', function () {           $next.removeclass([type, direction].join(' ')).addclass('active')           $active.removeclass(['active', direction].join(' '))           that.sliding = false           settimeout(function () {             that.$element.trigger(slidevent)           }, 0)         })         .emulatetransitionend(carousel.transition_duration)     } else {       $active.removeclass('active')       $next.addclass('active')       this.sliding = false       this.$element.trigger(slidevent)     }      iscycling && this.cycle()      return   }     // carousel plugin definition   // ==========================    function plugin(option) {     return this.each(function () {       var $this   = $(this)       var data    = $this.data('bs.carousel')       var options = $.extend({}, carousel.defaults, $this.data(), typeof option == 'object' && option)       var action  = typeof option == 'string' ? option : options.slide        if (!data) $this.data('bs.carousel', (data = new carousel(this, options)))       if (typeof option == 'number') data.to(option)       else if (action) data[action]()       else if (options.interval) data.pause().cycle()     })   }    var old = $.fn.carousel    $.fn.carousel             = plugin   $.fn.carousel.constructor = carousel     // carousel no conflict   // ====================    $.fn.carousel.noconflict = function () {     $.fn.carousel = old     return   }     // carousel data-api   // =================    var clickhandler = function (e) {     var href     var $this   = $(this)     var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip ie7     if (!$target.hasclass('carousel')) return     var options = $.extend({}, $target.data(), $this.data())     var slideindex = $this.attr('data-slide-to')     if (slideindex) options.interval = false      plugin.call($target, options)      if (slideindex) {       $target.data('bs.carousel').to(slideindex)     }      e.preventdefault()   }    $(document)     .on('click.bs.carousel.data-api', '[data-slide]', clickhandler)     .on('click.bs.carousel.data-api', '[data-slide-to]', clickhandler)    $(window).on('load', function () {     $('[data-ride="carousel"]').each(function () {       var $carousel = $(this)       plugin.call($carousel, $carousel.data())     })   })  }(jquery);