carrousel 3d gratuit

Découvrons aujourd’hui un carrousel 3d gratuit. Une fois n’est pas coutume, celui-ci est développé sous mootools.

Installation:

1-HTML

Vous pouvez bien sur changer le nombre d’image et les images.

<div id= »carousel »>

<div><a href= »# »><img src= »images/dreamweaver.png » /></a></div>

<div><a href= »# »><img src= »images/director.png » /></a></div>

<div><a href= »# »><img src= »images/flash.png » /></a></div>

<div><a href= »# »><img src= »images/freehand.png » /></a></div>

<div><a href= »# »><img src= »images/swf-player.png » /></a></div>

<div><a href= »# »><img src= »images/coldfusion.png » /></a></div></div>

2-CSS

le css est très simple:

<style>

#carousel{

background-color:#000000;

width:700px;

height:400px;

position:relative;

border:1px solid #FFFFFF;

}img{

width:100%;

height:100%;

border:0px solid #FFFFFF;

}

</style>

de plus il vous est possible de changer quelques variables dans le Javascript.

C’est là que la compréhension est nécessaire pour mettre en place le carrousel.
baseSpeed est la vitesse initiale du carrousel.

centerX et centery repérer le centre de l’accordéon dans le conteneur principal.
Celles-ci devront être modifiées si les principaux conteneurs de largeur et de hauteur attributs sont modifiées.
Enfin la vitesse speed utilisé en conjonction avec baseSpeed permet de fixer la vitesse initiale du carrousel.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;

Démo ICI et Téléchargement ICI.

Le site officiel n’étant plus disponible
je vous met ici la démo
et télécharger le fichier ici (.rar 92ko)

8 commentaires
  1. mottin 9 années ago

    Bonjour,
    Lelien téléchargement de carroussel 3D ne fonctionne pas je ne trouve pas les scripts javascripts

    Cordialement

  2. Auteur
    Admin 9 années ago

    le lien vient d’être mis à jour.

  3. annamo 8 années ago

    Bonjour,
    J’ai bien installé le carrousel 3d et j’essaye de le personnaliser, je remplace les images par des mots avec des liens, du coup mon carrousel est tout serré car j ai beaucoup de mots, ma question est donc comment « désseré » le carrousel ou plutot l’élargir, pour que les mots soient plus aérés entre eux.
    Merci de votre collaboration !
    Anna

  4. Auteur
    Admin 8 années ago

    a tu un exemple en ligne?
    sinon joue sur les réglages
    var radiusX = 190;
    var radiusY = 40;
    var centerX = 300;
    var centerY = 190;

  5. BaNaNa 8 années ago

    Bonjour,

    Je suis en train de créer un forum et je voulais savoir si on pouvait y mettre ton carousel?

    Est-ce qu’on peut mettre ton carousel sur fond blanc à la place de fond noir?

    Et es-ce que ton carousel ressemble à celui-ci, niveau vitesse, graphisme etc…

    footballistique . com en haut à droite

  6. Geolocalise-Ip 7 années ago

    Salut,

    Ce carrousel a l’air super, mais il n’y a pas les sources ni la démo, les liens sont morts …
    Aurais-tu s.t.p. les sources ?

    Merci d’avance

  7. Auteur
    Admin 7 années ago

    salut, effectivement le site officiel n’est plus dispo
    j’ai mis une démo ainsi que le fichier .rar à télécharger

  8. Geolocalise-Ip 7 années ago

    Super !
    Merci beaucoup !!!

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

11 + 17 =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?