You can create your own carousel through the enabler:
Install the JS and CSS of the DCO Enabler ADventori. More details here
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.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%"}}
]
});
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;
};
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 datahSplit
: Number of products per page with a horizontal displayvSplit
: Number of products per page with a vertical displayinsertHtmlStruct
: insert the HTML structure of the CarouselcarouselContainer
: Container which will contain the CarouselnavPrev
: 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 pointscta
: « Call To Action » Content of the buttonautoStart
: Enable/Disable Scrollingduration
: Duration of the banner (in ms)interval
: Duration time of a product’s display (in ms)onSlide
: Calls a function on every change of slideonTransition
: Calls a function on every transition of slideonStart
: Calls a function when the Carousel startonStop
: Calls a function when the Carousel stopYou 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'
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!