/* MARVEL CAROUSEL GALLERY CREATED BY: VITRUVIAN APRIL 28, 2018 */ var characters = [ ["ironman","IRON MAN"], ["blackpanther","BLACK PANTHER"], ["blackwidow","BLACK WIDOW"], ["captainamerica","CAPTAIN AMERICA"], ["daredevil","DAREDEVIL"], ["deadpool","DEADPOOL"], ["drax","DRAX"], ["falcon","FALCON"], ["gamora","GAMORA"], ["groot","GROOT"], ["hawkeye","HAWKEYE"], ["magneto","MAGNETO"], ["mantis","MANTIS"], ["nebula","NEBULA"], ["rocketracoon","ROCKET RACCOON"], ["scarletwitch","SCARLET WITCH"], ["spiderman","SPIDER MAN"], ["vision","VISION"], ["warmachine","WAR MACHINE"], ["wintersoldier","WINTER SOLDIER"], ["wolverine","WOLVERINE"] ]; characters = shuffle(characters); var selected = -1; $(document).ready(function(){ for (var i=0;i

"+character_name+"

"; $("#carousel").append(html); } $('#carousel').carousel3d(); }); (function($) { $.fn.carousel3d = function(args) { var el = ({ carousel_frame: $(this) }); var size = 21; var panelSize = el.carousel_frame.width(); var translateZ = Math.round((panelSize/2)/Math.tan(Math.PI/size)); el.carousel_frame.css({ "transform": "rotateY(0deg) translateZ(-"+translateZ+"px)" }); var rotateY = 0; var rotate_int = 0; var ry = 360/size; var box = 0; var mc = new Hammer(gallery); mc.on("swipeleft swiperight", function(ev) { switch (ev.type) { case "swiperight": if (selected<0) { rotate_int -= 1; animate_slider(); } break; case "swipeleft": if (selected<0) { rotate_int += 1; animate_slider(); } break; } }); function animate_slider() { rotateY = ry*rotate_int; image_pos = rotate_int; if (rotate_int>20) image_pos -= 21*parseInt(image_pos/21); if (rotate_int<-20) image_pos += 21*parseInt(image_pos/-21); $("figure").css({ "opacity":"0.6", "background-color":"transparent" }); for(i=0;i20) image_pos = image_pos-21; selected = image_pos; if (rotate_int>20) image_pos -= 21*parseInt(image_pos/21); if (rotate_int<-20) image_pos += 21*parseInt(image_pos/-21); $("figure").not(document.getElementById("ch_"+image_pos)).css({ "opacity":"0" }); $("#ch_"+image_pos).css({ "background-color":"transparent", "border":"1px solid #ffffff", "border-bottom":"0" }); character_name = $("#ch_"+image_pos+" div").html(); $("#header span").html(character_name); $("#base").fadeTo(500,1,"linear"); $("#ch_"+image_pos+" div").fadeTo(500,0,"linear",function() { $("figure").not(document.getElementById("ch_"+image_pos)).remove(); }); }); }; })(jQuery); function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; while (0 !== currentIndex) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }

Marvel Carousel Gallery