ADVENTORI’S CAROUSEL

CREATE A CAROUSEL

Thanks to our DCO Enabler, you can create your own carousel in just a few steps. 

First, declare your items in Adobe Animate:

• container : movieClip that will contain your carousel.

• slide : symbol reference used as a “product” template (place the slide next to the scene).

• btnLeft : left button of your Carousel.

• btnRight : right button of your Carousel.

Initialization of product flows:

To test your carousel, you can set default values after inserting the script. These values will automatically be replaced by dynamic values at the time of AdServing.

    var data = ADventori.initData({
        items: [
                {data: {name: "AN ARTICLE",image: "images/310-barbecue.png",description: "A description of variable length",price: "99,99",original_price: "125,00",url: "https://www.google.fr/?q=test1",discount:"-35%" }},
		{data: {name: "AN ARTICLE",image: "images/101-ventilateur.png",description: "A description of variable length",price: "199,99",original_price: "",url: "https://www.google.fr/?q=test2",discount:""}},
		{data: {name: "AN ARTICLE",image: "images/107-Sac-a-outils.png",description: "A description of variable length",price: "399,99",original_price: "467,00",url: "https://www.google.fr/?q=test3",discount:"-15%" }},
		{data: {name: "AN ARTICLE",image: "images/301-recuperateur.png",description: "A description of variable length",price: "399,99",original_price: "167,00",url: "https://www.google.fr/?q=test4",discount:"-50%" }},
		{data: {name: "AN ARTICLE",image: "images/321-dalle-bois.png",description: "A description of variable length",price: "259,99",original_price: "367,00",url: "https://www.google.fr/?q=test5",discount:"-50%" }}
		]
    });

The component expects a collection of objects named items with the following properties:

• name: Name of the product
• image: Image of the product
• url: Product click URL
• description: Description of the product
• price: Product’s price
• original_price: Original price of the product
• discount: % Discount 

Then, you must match the names of the products streams with the names of your content in “slide”:

Useful notes:

When creating a carousel:

If TextField is in “slide”, and the name matches –> AddAndAdaptText 

If MovieClip is in “slide”, and the name matches –> AddAndAdaptImage

How to declare and configure the carousel:

     var carousel = new ADventori.Carousel({ 
                 items: ADventori.data.items, 
                 carouselContainer : this.container, 
                 symbol :'slide',
                 btnLeft :this.left,
                 btnRight :this.right, 
                 animation :'scale',
                 typeEffect : createjs.Ease.cubicIn ,
                 intervalAnimation : 500,
                 duration : 20000,
                 interval : 3000, 
                 autoStart :true,
                 textFieldProps:{
                                 name: {width: 110, height: 23,sizeMin:14},
                                 description: {width: 80, height: 33,sizeMin:7},
                                 price: {width: 99, height: 32,sizeMin:15}, 
                                 original_price: {width: 132, height: 29,sizeMin:10},
                                 discount: {width: 76, height: 26,sizeMin:10}},  
                 },
                 bulletContainer : this.mainContainer.bullet ,
                 bulletColor : "#5EBEBB", 
                 bulletColorActive :"#114454" , 
                 bulletColorOver : "#EC6A6D" 
               );

• items: Dynamic values contained in data (mandatory)
• carouselContainer: movieClip in which the carousel will be inserted (mandatory)
• symbol: Name of the symbol corresponding to the model (here: “slide”) (mandatory)
• btnLeft : movieClip playing the left button (optional)
• btnRight: movieClip playing the right button (optional)
• animation: Add a custom animation in between slides (available animations:  rotate /  translateY / translateX /  fade / scale) (in the near future: personalized animations)
• typeEffect: Animation effect type (more info). (optional)Example : createjs.Ease.cubicInOut
• intervalAnimation: Duration of the product’s animation (optional)
• autoStart: Enable / disable scrolling (optional)
• duration: Duration of the banner animation (in ms) (optional)
• interval: Duration of the product display (in ms) (optional)
• textFieldProps: Properties of the used textFields (width, height, sizeMin) are required (mandatory).
• bulletContainer : movieClip where the bullet points will be present (optional)
• bulletColor : color of bullets points (optional)
• bulletColorActive : color bullet active (optional)
• bulletColorOver : color bullet point on mouse hover (optional)

Manage the visibility of each slide’s elements:

If you need to manage items for promotion, for example, you can control the appearance of each slide.

Example:

var elems = carousel.slideList(); 
 for(var i = 0 ; i<=elems.length-1;i++){
 var slide = elems[i];
 slide['angle'].visible = (slide['discount'].text != '');
 slide['barre'].visible =(slide['original_price'].text !='');
 slide['euroOld'].visible =(slide['original_price'].text !=''); 
 }

In this example we have retrieved all the slides created for the Carousel (thanks to carrousel.slideList()), and depending on the value of the elements, the carousel will or won’t display some graphic elements.

Here are some examples of customized carousels:

Download example

Download example