Composants

Carousel ADventori
Documentation DCO Enabler -> ENABLER HTML5 -> Carousel ADventori

CRÉER VOTRE CAROUSEL

 

Vous pouvez créer votre propre Carousel grâce à notre enabler et ce de manière très simple :



Déclarons tous d’abord nos éléments html:

  • myAd : div qui contiendra notre Publicité .
  • myBrand : div qui contiendra notre Bannière .
  • myCarousel : div qui contiendra notre Carousel.
<div id="myAd">
    <div id="myBrand"><img src="img/300x44_YourBrand-Header.jpg"></div>    
    <div id="myCarousel"></div>
</div>



Initialisation des flux produits :

Pour tester notre carrousel , vous pouvez mettre des valeurs par défaut après avoir inséré le script. Ces valeurs seront automatiquement remplacées par des valeurs dynamiques au moment de l’AdServing.

    var data = ADventori.initData({
        items: [
            {"data":{"name":"Bague Or Blanc et Argent","url":"http://urlproduit1.fr","img":"img/200x200-bague.jpg","description":"Bague, 2 ors, 6.41g.<br />Collection limitée.<br />Taille 50 à 66.<br />Taille classique.","price":"275,30","original_price":"375,00"}},
            {"data":{"name":"Canapé 4 Places Fushia","url":"http://urlproduit2.fr","img":"img/200x200-canape.jpg","description":"Canapé 4 places.<br />Colori fushia.<br />Structure métallique.<br />201x8072x cm.","price":"217,19","original_price":"315,00"}},
            {"data":{"name":"PC design Tout-en-un","url":"http://urlproduit3.fr", "img":"img/200x200-pc.jpg","description":"Processeur Intel i3.<br />Windows 8.<br />8 Go de mémoire<br />Disque dur d'1 To.","price":"750","original_price":"890"}}
        ]
    });

Le composant attend une collection d’objet nommée items avec comme propriétés :

  • name: Nom du produit
  • img: L’image du produit
  • url: L’url du produit
  • description: Description du produit
  • price: Prix du produit
  • original_price: Ancien prix du produit

 


Nous allons déclarer ce nouveau carousel et le configurer :

    var carousel = new ADventori.Carousel({
        items: data.items,
        insertHtmlStruct: true,
        carouselContainer:document.getElementById("myCarousel"),
        navPrev:'<img src="img/navPrev.png">',
        navNext:'<img src="img/navNext.png">',
        animation :'skewY',
        hiddenBullets:false,
        cta: '<span id="triangle"> ► </span><span id="go"> GO !</span>',
        autoStart: true,
        duration : 30000,
        interval : 3000,
        onSlide : function(nSlide) { myCallBack();}
    });
  • items: Les valeurs dynamique contenues dans data
  • hSplit: Nombre de produits par page avec un affichage horizontal
  • vSplit: Nombre de produits par page avec un affichage vertical
  • insertHtmlStruct: insère le squelette du Carousel
  • carouselContainer: désigne l’endroit où le Carousel sera inséré
  • navPrev: ajoute l’élément de navigation “précédent”  (cela peut être une image dans une balise img ou bien un simple caractère ASCII)
  • navNext: ajoute l’élément de navigation “suivant” (cela peut être une image dans une balise img ou bien un simple caractère ASCII)
  • animation: ajoute une animation personnalisée lors du changement de slide (animations disponibles : none / skewY / rotateY / rotateX / scaleLittle / scaleBig / translateY / translateX / erase)
  • hiddenBullets: cache les points de navigation présent sur les slides
  • cta: « Call To Action » Contenu du bouton
  • autoStart: Activer/désactiver le défilement
  • duration: Durée de la bannière (en ms)
  • interval: Durée d’affichage d’un produit (en ms)
  • onSlide: Appelle une fonction à chaque changement de slide

 

Vous voulez faire vos propres animations ? C’est possible !! :

Il faut créer 3 class CSS en respectant ces suffixes ( _active / _prev / _next)

   
monAnimation_active{
    left:0;
}
monAnimation_prev{
    left:-100%;
}
monAnimation_next{
    left:100%;
}

Pour appeler votre animation il suffit d’indiquer dans la configuration du Carousel :
animation: ‘monAnimation’

 


Le carousel est bien, mais j’aimerais le modifier, est ce possible ? :

Vous pouvez modifier la fonction qui structure les slides. Vous devez donc réécrire la fonction pour faire en sorte qu’elle soit adaptée à la structure que vous désirez, tout en récupérant les éléments de votre initData personnel.

 

Vous désirez réaliser votre propre initData car vous n’avez pas besoin de nos éléments. Voici un exemple ci-dessous :

var data = ADventori.initData({        
        items: shuffle([
            {"data":{"poste":"Ingénieur Réseaux et sécurité (H/F)","url":"http://adventori.com","entreprise":"NEURONES IT","ville":"PARIS", "description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}},
            {"data":{"poste":"Directeur de projet swift (H/F)","url":"http://adventori.fr","entreprise":"01 CONSEILS ET SERVICES","ville":"LYON", "description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}},
            {"data":{"poste":"Ingénieur qualité développement (H/F)","url":"http://adventori.fr","entreprise":"AGENCE E","ville":"MARSEILLE","description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}},
            {"data":{"poste":"Chef de projet CRM Salesforce /Veeva H/F","url":"http://adventori.fr","entreprise":"COGNIZANT","ville":"BOULOGNE BILLANCOURT","description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}},
            {"data":{"poste":"Responsable d'application SIRH (H/F)","url":"http://adventori.fr","entreprise":"ROBERT WALTERS HOLDING SAS","ville":"SAINT MALO","description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}},
            {"data":{"poste":"TESTEUR IT H/F","url":"http://adventori.fr","entreprise":"SYNERGIE","ville":"BOIS COLOMBES","description":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}}
        ])
});

 

Vous voulez créer la structure HTML suivante :

<div class="poste">
    Le nom du poste
</div>
<div class="entreprise">
    Le nom de l'entreprise
</div>
<div class="description">
    La description
</div>
<div class="ville">
    La ville
</div>
<div class="cta">
    Le CTA
</div>

 

Maintenant, il faut structurer votre HTML grâce à initSlide. Vous devez donc réécrire la fonction initSlide pour qu’elle renvoie votre propre structure HTML tout en étant associés à votre nouveau initData :

ADventori.Carousel.prototype.initSlide = function(data) {
        var result = '';
        if(data.poste)result += '<div class="poste">' + data.poste + '</div>';
        if(data.entreprise)result += '<div class="entreprise">' + data.entreprise + '</div>';
        if(data.description)result += '<div class="description">' + data.description + '</div>';
        if(data.ville)result += '<div class="ville">' + data.ville + '</div>';
        result += '<div class="cta">' + this.conf.cta + '</div>';
        return (result);
 };


Voici des rendus possible avec cette initialisation

Voici quelques exemples de carousel customisé :