Carousel

You can create your own carousel through the enabler:

First step

Install the JS and CSS of the DCO Enabler ADventori. More details here

Second step

Declare all our html elements:

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

Third step

You have to initialize your 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.

In your initData, you can add dynamization variables that can be used in your banner and not in ADventori’s Carousel.

Values found inside items correspond to the product feed which will be injected in your Carousel. You have to keep the same structure items.data then insert the properties that you want.

var data = ADventori.initData({
    text1:"Lorem ipsum", //this text is not in the product's feed.
    cta:"Lorem >",
    items: [
        {data:{name:"An Article",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/107-Sac-a-outils.png",description:"A description of variable length",price:"79,99",original_price:"",url:"https://www.google.fr/?q=test3",discount:""}},
        {data:{name:"An Article",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/321-dalle-bois.png",description:"A description of variable length",price:"79,99",original_price:"1000",url:"https://www.google.fr/?q=test4",discount:"-50%"}},
        {data:{name:"An Article",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/301-recuperateur.png",description:"A description of variable length",price:"79,99",original_price:"1000",url:"https://www.google.fr/?q=test5",discount:"-50%"}}
      ]
});

Fourth step

The initSlide function allows you to create the structure of a slide which will contain the product feed. All you need to do is inject the HTML structure you want, without forgetting to insert the data from your initData.

Suppose you want to use this structure:

    <div class="name"> product name</div>
    <div class="img_container"> product picture </div>
    <div class="description"> product description </div>
    <div class="price"> product price</div>
    <div class="original_price"> product original price </div>
    <div class="discount"> the discount value </div>
    <div class="cta"> CTA </div>

Then you have to use the method ìnitSlide` like this :

ADventori.Carousel.prototype.initSlide = function(data) {
    var result = '<div>';
        result += '<div class="name">' + data.name + '</div>';
        result += '<div class="img_container"><span class="img_helper"></span><img class="photos" src="' + data.img + '"></div>';
        result += '<div class="description">' + data.description + '</div>';
        result += '<div class="price">'+data.price+'<sup>€</sup></div>';
        if(data.original_price) result += '<div class="original_price">'+data.original_price+'<sup>€</sup></div>';
        if(data.discount) result += '<div class="discount"><div class="bgDiscount"></div><div class="valueDiscount">'+data.discount+'</div></div>'
        result+= '<div class="textCta">'+this.conf.cta+'</div>';
        result+= '</div>'
    return result;
  };

Fifth step

Now you have to declare and initialize your Carousel:

var carousel = new ADventori.Carousel({
    items: data.items,
    hSplit:1,
    vSplit:2,
    insertHtmlStruct: true,
    carouselContainer:document.getElementById("ADventori_myCarousel"),
    navPrev:'<div class="arrowPrev"></div>',
    navNext:'<div class="arrowNext"></div>',
    animation :'translateX',
    autoStart: true,
    hiddenBullets: false,
    cta:'ADventori.data.cta'
});

Below are the Carousel properties:

  • 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 in between slides (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’s display (in ms)
  • onSlide: Calls a function on every change of slide
  • onTransition: Calls a function on every transition of slide
  • onStart: Calls a function when the Carousel start
  • onStop: Calls a function when the Carousel stop

You can make your own animation :

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

Example: .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'

Sixth step

Now you have to design your Carousel’s slides. The parent is the following: #adventoriSlides .slide .item. All your content is inside these tags.

    <div class="name"> Product’s name </div> <!-- CSS Selector :  #adventoriSlides .slide .item .name -->
    <div class="img_container"> Product’s image </div> <!-- CSS Selector :  #adventoriSlides .slide .item img_container -->
    <div class="description"> Product’s description </div> <!-- CSS Selector :  #adventoriSlides .slide .item .description -->
    <div class="price"> Product’s price </div> <!-- CSS Selector :  #adventoriSlides .slide .item .price -->
    <div class="original_price"> Product’s original price </div> <!-- CSS Selector :  #adventoriSlides .slide .item .original_price -->
    <div class="discount"> Promotion’s rate in percentage </div> <!-- CSS Selector :  #adventoriSlides .slide .item .discount -->
    <div class="cta"> CTA </div> <!-- CSS Selector :  #adventoriSlides .slide .item .cta -->

ADventori’s Carousel is now implemented and functional!

Examples