Components

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

CReate your carousel

 

You can create your own carousel through the enabler :

First declare all our html elements:

  • myAd : div who will hold our Ad .
  • myBrand : div who will hold our Brand .
  • myCarousel : div who will hold the Carousel.
<div id="myAd">
    <div id="myBrand"><img src="img/300x44_YourBrand-Header.jpg"></div>    
    <div id="myCarousel"></div>
</div>

Initialize products flows :

To test our carousel, you can set default values after inserting the script. These values will be automaticaly replaced with dynamic values at the time of ad serving.

    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"}}
        ]
    });

The component expects an objects collection of items with properties :

  • name: Name of product
  • img: Picture of product
  • url: Url of product
  • description: Description of product
  • price: Price of product
  • original_price: Old price of product

 

We will declare this new carousel and configure it :

    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: The dynamic values contained in data
  • hSplit: Number of products per page with a horizontal display
  • vSplit: Number of products per page with a vertical display
  • insertHtmlStruct: insert the HTML structure of the Carousel
  • carouselContainer: Container which will contain the Carousel
  • navPrev: add the navigation element “Prev”  (it can be an img balise or a simple ASCII character)
  • navNext: add the navigation element “Next”  (it can be an img balise or a simple ASCII character)
  • animation: add an animation during slides transition (animation available : none / skewY / rotateY / rotateX / scaleLittle / scaleBig / translateY / translateX / erase)
  • hiddenBullets: hide bullets points
  • cta: « Call To Action » Content of the button
  • autoStart: Enable/Disable Scrolling
  • duration: Duration of the banner (in ms)
  • interval: Duration time of a product (in ms)
  • onSlide: Call a function on each slide change

 

You can make your own animation :

You have to create 3 CSS class with these suffix ( _active / _prev / _next)

   
myAnimation_active{
    left:0;
}
myAnimation_prev{
    left:-100%;
}
myAnimation_next{
    left:100%;
}

If you want to call your animation, you just have to write this line in your Carousel configuration :
animation: ‘myAnimation’

 


The carousel is very pretty , but I want to change it, is it possible ? :

You can modify the fonction which create the structure of each slide. You have to rewrite the function to adjust it with your own initData.

 

You want to create your own initData because you don’t need our elements. You can find bellow an example :

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"}}
        ])
});

 

You want this HTML structure for your slide :

<div class="poste">
    Name of the poste
</div>
<div class="entreprise">
    name of the company
</div>
<div class="description">
    description
</div>
<div class="ville">
    city
</div>
<div class="cta">
   CTA
</div>

 

Now you have to build your HTML structure thanks to the initSlide. You have to rewrite the initSlide method which have to return your HTML associated with your 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);
 };

Here you can find some example with this configuration

Other examples :