Minimit Gallery est un plugin jQuery permettant de créer de nombreux types de galeries, sliders, carousels ou slideshows d’images.
Il ne propose qu’une couche de logique permettant de gérer et créer rapidement des sliders de contenu de différents types, ce sera donc à vous de le personnaliser à vos souhaits.
- Sliders de contenu basiques
- Slideshows de contenus avec défilement automatique
- Carousels de contenu
- Pagination dynamique
- Menus avancés
- Etc
Un bon exemple permet de mieux comprendre le fonctionnement:
Pour recréer ce carousel, voici le code utilisé côté HTML:
012345678910111213PrevNext
Et le Javascript permettant de créer le carousel:
var reference = "example9"; this[reference+"_click"] = this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){ $("#"+reference+"-"+deactivated).removeClass("active"); $("#"+reference+"-"+activated).addClass("active"); var arr = multiple.activated; var alpha = Math.PI*2/(arr.length-1); var xradius = 200; var yradius = 60; for (var i=0;i<arr.length-1;i++){ var mypath = $("#"+reference+"-"+arr[i]); var middle = Math.floor(arr.length/2); // if(arr[i]==activated || i==middle){ var depth = 0; } else { var depth = mg_mapDistanceReverse(multiple.plus, i, arr.length, 0); } // var theta = alpha*(activated-arr[i]-depth/6)+1.6; // -depth/6 will give additional distance based on depth: it gives space for activated var x = 20+xradius+Math.cos(theta)*xradius; var y = yradius+Math.sin(theta)*yradius; var w = h = y/4; var scale = 0.2+y/140; mypath.stop().css("z-index", Math.round(y/10)); if(arr[i]==activated){ w = 200; h = 100; x -= 75; y -= 50; scale = 1; mypath.css("border-radius", 20) } else if(arr[i]==deactivated){ mypath.css("border-radius", 100) w = 50; h = 50; } else { w = 50; h = 50; } mypath.animate({width:w, height:h},{queue:false, duration:1300, specialEasing: { width:'easeOutExpo', height:'easeOutExpo'}}); mypath.animate({marginLeft:x, marginTop:y, transform: 'scaleX('+scale+') scaleY('+scale+')'},{queue:true, duration:1300, specialEasing: {marginLeft:'easeOutExpo', marginTop:'easeOutExpo', transform:'easeOutExpo'}}); } $("#"+reference+"-"+deactivated).removeClass("active"); $("#"+reference+"-"+activated).addClass("active").css("z-index",100); } mg_init({ reference:"example9", activated:[0], click:{ interactive:true, max_activated:1, less:7, plus:7 }, interaction:{ cycle:true } });