{"id":9103,"date":"2018-03-29T15:21:06","date_gmt":"2018-03-29T13:21:06","guid":{"rendered":"https:\/\/www.adventori.com\/fr\/?p=9103"},"modified":"2018-03-29T15:27:15","modified_gmt":"2018-03-29T13:27:15","slug":"carousel-adventori","status":"publish","type":"post","link":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/","title":{"rendered":"Carousel ADventori"},"content":{"rendered":"<a style=\"color: grey;\" href=\"\/?page_id=11761\">Documentation DCO Enabler -&gt; <\/a><a style=\"color: grey;\" href=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/\">ENABLER HTML5 -&gt; <\/a><a style=\"color: grey;\" href=\"\/?p=9103\">Carousel ADventori<\/a>\r\n<h2 id=\"carrousel\" style=\"text-align: center;\">CR\u00c9ER VOTRE CAROUSEL<\/h2><p>&nbsp;<\/p><h3>Vous pouvez cr\u00e9er votre propre Carousel gr\u00e2ce \u00e0 notre enabler et ce de mani\u00e8re tr\u00e8s simple :<\/h3>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"319\" style=\"width: 100%;\" scrolling=\"no\" src=\"https:\/\/codepen.io\/adventori\/embed\/OVggdY\/?height=319&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/adventori\/pen\/OVggdY\/\">adaptImg V2<\/a> by ADventori (<a href=\"https:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<h4><br \/><br \/><strong>D\u00e9clarons tous d\u2019abord nos \u00e9l\u00e9ments html:<\/strong><\/h4><ul><li><strong>myAd<\/strong> : div qui contiendra notre Publicit\u00e9 .<\/li><li><strong>myBrand<\/strong> : div qui contiendra notre Banni\u00e8re .<\/li><li><strong>myCarousel<\/strong> : div qui contiendra notre Carousel.<\/li><\/ul><pre>&lt;div id=\"myAd\"&gt;<br \/>    &lt;div id=\"myBrand\"&gt;&lt;img src=\"img\/300x44_YourBrand-Header.jpg\"&gt;&lt;\/div&gt;    <br \/>    &lt;div id=\"myCarousel\"&gt;&lt;\/div&gt;<br \/>&lt;\/div&gt;\r\n\r\n<\/pre><h4><br \/><br \/><strong>Initialisation des flux produits :<\/strong><\/h4><p>Pour tester notre carrousel , vous pouvez mettre des valeurs par d\u00e9faut apr\u00e8s avoir ins\u00e9r\u00e9 le script. Ces valeurs seront automatiquement remplac\u00e9es par des valeurs dynamiques au moment de l\u2019AdServing.<\/p><pre>    var data = ADventori.initData({\r\n        items: [\r\n            {\"data\":{\"name\":\"Bague Or Blanc et Argent\",\"url\":\"http:\/\/urlproduit1.fr\",\"img\":\"img\/200x200-bague.jpg\",\"description\":\"Bague, 2 ors, 6.41g.&lt;br \/&gt;Collection limit\u00e9e.&lt;br \/&gt;Taille 50 \u00e0 66.&lt;br \/&gt;Taille classique.\",\"price\":\"275,30\",\"original_price\":\"375,00\"}},\r\n            {\"data\":{\"name\":\"Canap\u00e9 4 Places Fushia\",\"url\":\"http:\/\/urlproduit2.fr\",\"img\":\"img\/200x200-canape.jpg\",\"description\":\"Canap\u00e9 4 places.&lt;br \/&gt;Colori fushia.&lt;br \/&gt;Structure m\u00e9tallique.&lt;br \/&gt;201x8072x cm.\",\"price\":\"217,19\",\"original_price\":\"315,00\"}},\r\n            {\"data\":{\"name\":\"PC design Tout-en-un\",\"url\":\"http:\/\/urlproduit3.fr\", \"img\":\"img\/200x200-pc.jpg\",\"description\":\"Processeur Intel i3.&lt;br \/&gt;Windows 8.&lt;br \/&gt;8 Go de m\u00e9moire&lt;br \/&gt;Disque dur d'1 To.\",\"price\":\"750\",\"original_price\":\"890\"}}\r\n        ]\r\n    });\r\n<\/pre><p>Le composant attend une collection d\u2019objet nomm\u00e9e <code>items<\/code> avec comme propri\u00e9t\u00e9s :<\/p><ul><li><code>name<\/code>: Nom du produit<\/li><li><code>img<\/code>: L\u2019image du produit<\/li><li><code>url<\/code>: L\u2019url du produit<\/li><li><code>description<\/code>: Description du produit<\/li><li><code>price<\/code>: Prix du produit<\/li><li><code>original_price<\/code>: Ancien prix du produit<\/li><\/ul><p>&nbsp;<\/p><h4><br \/><strong>Nous allons d\u00e9clarer ce nouveau carousel et le configurer :<\/strong><\/h4><pre>    var carousel = new ADventori.Carousel({\r\n        items: data.items,\r\n        insertHtmlStruct: true,<br \/>        carouselContainer:document.getElementById(\"myCarousel\"),<br \/>        navPrev:'&lt;img src=\"img\/navPrev.png\"&gt;',<br \/>        navNext:'&lt;img src=\"img\/navNext.png\"&gt;',<br \/>        animation :'skewY',<br \/>        hiddenBullets:false,\r\n        cta: '&lt;span id=\"triangle\"&gt; \u25ba &lt;\/span&gt;&lt;span id=\"go\"&gt; GO !&lt;\/span&gt;',\r\n        autoStart: true,\r\n        duration : 30000,\r\n        interval : 3000,<br \/>        onSlide : function(nSlide) { myCallBack();}\r\n    });\r\n\r\n<\/pre><ul><li><code>items<\/code>: Les valeurs dynamique contenues dans <code>data<\/code><\/li><li><code>hSplit<\/code>: Nombre de produits par page avec un affichage horizontal<\/li><li><code>vSplit<\/code>: Nombre de produits par page avec un affichage vertical<\/li><li><code><span>insertHtmlStruct<\/span><\/code>: <span>ins\u00e8re le squelette du Carousel<\/span><\/li><li><code>carouselContainer<\/code>: <span>d\u00e9signe l\u2019endroit o\u00f9 le Carousel sera ins\u00e9r\u00e9 <\/span><\/li><li><code><span>navPrev<\/span><\/code>: <span>ajoute l\u2019\u00e9l\u00e9ment de navigation \u201cpr\u00e9c\u00e9dent\u201d\u00a0 (cela peut \u00eatre une image dans une balise img ou bien un simple caract\u00e8re ASCII)<\/span><\/li><li><code>navNext<\/code>:\u00a0<span>ajoute l\u2019\u00e9l\u00e9ment de navigation \u201csuivant\u201d (cela peut \u00eatre une image dans une balise img ou bien un simple caract\u00e8re ASCII)<\/span><\/li><li><code><span>animation<\/span><\/code>: <span>ajoute une animation personnalis\u00e9e lors du changement de slide <i>(animations disponibles : <\/i><span style=\"color: #99cc00;\"><i>none \/ skewY \/ rotateY \/ rotateX \/ scaleLittle \/ scaleBig \/ translateY \/ translateX \/ erase<\/i><\/span><span>)<\/span><\/span><\/li><li><code>hiddenBullets<\/code>:\u00a0<span>cache les points de navigation pr\u00e9sent sur les slides<\/span><\/li><li><code>cta<\/code>: \u00ab Call To Action \u00bb Contenu du bouton<\/li><li><code>autoStart<\/code>: Activer\/d\u00e9sactiver le d\u00e9filement<\/li><li><code>duration<\/code>: Dur\u00e9e de la banni\u00e8re (en ms)<\/li><li><code>interval<\/code>: Dur\u00e9e d\u2019affichage d\u2019un produit (en ms)<\/li><li><code>onSlide<\/code>: Appelle une fonction \u00e0 chaque changement de slide<\/li><\/ul><p>&nbsp;<\/p>\r\n\r\n\r\n\r\n\r\n<h4><strong>Vous voulez faire vos propres animations ? C&rsquo;est possible !! :<\/strong><\/h4>\r\n<p><span>Il faut cr\u00e9er 3 class CSS en respectant ces suffixes ( _active \/ _prev \/ _next)<\/span><\/p>\r\n<pre>   \r\nmonAnimation_active{\r\n    left:0;\r\n}\r\nmonAnimation_prev{\r\n    left:-100%;\r\n}\r\nmonAnimation_next{\r\n    left:100%;\r\n}\r\n<\/pre>\r\n\r\n\r\n\r\n<p>Pour appeler votre animation il suffit d&rsquo;indiquer dans la configuration du Carousel :<strong> <br \/><\/strong><code><span>animation<\/span><\/code>: <strong>&lsquo;monAnimation&rsquo;<br \/><\/strong><\/p>\r\n\r\n\r\n<p>&nbsp;<\/p><h4><strong><br \/>Le carousel est bien, mais j\u2019aimerais le modifier, est ce possible ? :<\/strong><\/h4>\r\n\r\n\r\n<p>Vous pouvez modifier la fonction qui structure les slides. Vous devez donc r\u00e9\u00e9crire la fonction pour faire en sorte qu&rsquo;elle soit adapt\u00e9e \u00e0 la structure que vous d\u00e9sirez, tout en r\u00e9cup\u00e9rant les \u00e9l\u00e9ments de votre initData personnel.<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>Vous d\u00e9sirez r\u00e9aliser votre propre initData car vous n&rsquo;avez pas besoin de nos \u00e9l\u00e9ments. Voici un exemple ci-dessous :<\/p>\r\n<pre>var data = ADventori.initData({        \r\n        items: shuffle([\r\n            {\"data\":{\"poste\":\"Ing\u00e9nieur R\u00e9seaux et s\u00e9curit\u00e9 (H\/F)\",\"url\":\"http:\/\/adventori.com\",\"entreprise\":\"NEURONES IT\",\"ville\":\"PARIS\", \"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}},\r\n            {\"data\":{\"poste\":\"Directeur de projet swift (H\/F)\",\"url\":\"http:\/\/adventori.fr\",\"entreprise\":\"01 CONSEILS ET SERVICES\",\"ville\":\"LYON\", \"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}},\r\n            {\"data\":{\"poste\":\"Ing\u00e9nieur qualit\u00e9 d\u00e9veloppement (H\/F)\",\"url\":\"http:\/\/adventori.fr\",\"entreprise\":\"AGENCE E\",\"ville\":\"MARSEILLE\",\"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}},\r\n            {\"data\":{\"poste\":\"Chef de projet CRM Salesforce \/Veeva H\/F\",\"url\":\"http:\/\/adventori.fr\",\"entreprise\":\"COGNIZANT\",\"ville\":\"BOULOGNE BILLANCOURT\",\"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}},\r\n            {\"data\":{\"poste\":\"Responsable d'application SIRH (H\/F)\",\"url\":\"http:\/\/adventori.fr\",\"entreprise\":\"ROBERT WALTERS HOLDING SAS\",\"ville\":\"SAINT MALO\",\"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}},\r\n            {\"data\":{\"poste\":\"TESTEUR IT H\/F\",\"url\":\"http:\/\/adventori.fr\",\"entreprise\":\"SYNERGIE\",\"ville\":\"BOIS COLOMBES\",\"description\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"}}\r\n        ])\r\n});\r\n<\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>Vous voulez cr\u00e9er la structure HTML suivante :<\/p>\r\n<pre>&lt;div class=\"poste\"&gt;<br \/>    Le nom du poste<br \/>&lt;\/div&gt;<br \/>&lt;div class=\"entreprise\"&gt;<br \/>    Le nom de l'entreprise<br \/>&lt;\/div&gt;<br \/>&lt;div class=\"description\"&gt;<br \/>    La description<br \/>&lt;\/div&gt;<br \/>&lt;div class=\"ville\"&gt;<br \/>    La ville<br \/>&lt;\/div&gt;<br \/>&lt;div class=\"cta\"&gt;<br \/>    Le CTA<br \/>&lt;\/div&gt;<\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>Maintenant, il faut structurer votre HTML gr\u00e2ce \u00e0 initSlide. Vous devez donc r\u00e9\u00e9crire la fonction initSlide pour qu&rsquo;elle renvoie votre propre structure HTML tout en \u00e9tant associ\u00e9s \u00e0 votre nouveau initData :<\/p>\r\n<pre>ADventori.Carousel.prototype.initSlide = function(data) {<br \/>        var result = '';<br \/>        if(data.poste)result += '&lt;div class=\"poste\"&gt;' + data.poste + '&lt;\/div&gt;';<br \/>        if(data.entreprise)result += '&lt;div class=\"entreprise\"&gt;' + data.entreprise + '&lt;\/div&gt;';<br \/>        if(data.description)result += '&lt;div class=\"description\"&gt;' + data.description + '&lt;\/div&gt;';<br \/>        if(data.ville)result += '&lt;div class=\"ville\"&gt;' + data.ville + '&lt;\/div&gt;';<br \/>        result += '&lt;div class=\"cta\"&gt;' + this.conf.cta + '&lt;\/div&gt;';<br \/>        return (result);<br \/> };\r\n\r\n<\/pre>\r\n<p><br \/>Voici des rendus possible avec cette initialisation<\/p>\r\n\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"650\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/PZNJRM\/?height=650&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/PZNJRM\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"319\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/qbZVRw\/?height=319&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/qbZVRw\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n\r\n<h4><strong>Voici quelques exemples de carousel customis\u00e9 :<\/strong><\/h4>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"319\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/rxepJa\/?height=319&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/rxepJa\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"319\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/RraxLL\/?height=319&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/RraxLL\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"319\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/QyNOgM\/?height=319&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/QyNOgM\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"650\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/qbZxWX\/?height=650&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/qbZxWX\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<iframe loading=\"lazy\" width=\"300\" height=\"650\" style=\"width: 100%;\" scrolling=\"no\" src=\"\/\/codepen.io\/adventori\/embed\/ZQWaXR\/?height=650&#038;theme-id=14332&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"http:\/\/codepen.io\/adventori\/pen\/ZQWaXR\">Ajouter Enabler v2<\/a> by ADventori (<a href=\"http:\/\/codepen.io\/adventori\">@adventori<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.\r\n<\/iframe>\r\n\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Documentation DCO Enabler -&gt; ENABLER HTML5 -&gt; Carousel ADventori CR\u00c9ER VOTRE CAROUSEL&nbsp;Vous pouvez cr\u00e9er votre propre Carousel gr\u00e2ce \u00e0 notre enabler et ce de mani\u00e8re tr\u00e8s simple : See the Pen adaptImg V2 by ADventori (@adventori) on CodePen. D\u00e9clarons tous d\u2019abord nos \u00e9l\u00e9ments html:myAd : div qui contiendra notre Publicit\u00e9 .myBrand : div qui contiendra &hellip; <a href=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/\">Continued<\/a><\/p>\n","protected":false},"author":5,"featured_media":11802,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[237],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Carousel ADventori | ADventori<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carousel ADventori | ADventori\" \/>\n<meta property=\"og:description\" content=\"Documentation DCO Enabler -&gt; ENABLER HTML5 -&gt; Carousel ADventori CR\u00c9ER VOTRE CAROUSEL&nbsp;Vous pouvez cr\u00e9er votre propre Carousel gr\u00e2ce \u00e0 notre enabler et ce de mani\u00e8re tr\u00e8s simple : See the Pen adaptImg V2 by ADventori (@adventori) on CodePen. D\u00e9clarons tous d\u2019abord nos \u00e9l\u00e9ments html:myAd : div qui contiendra notre Publicit\u00e9 .myBrand : div qui contiendra &hellip; Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/\" \/>\n<meta property=\"og:site_name\" content=\"ADventori\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-29T13:21:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-29T13:27:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@adventori\" \/>\n<meta name=\"twitter:site\" content=\"@adventori\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabien Delaforge\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/v4.adventori.com\/#organization\",\"name\":\"ADventori\",\"url\":\"https:\/\/v4.adventori.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/adventori\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\",\"url\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"contentUrl\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"width\":400,\"height\":133,\"caption\":\"ADventori\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/v4.adventori.com\/#website\",\"url\":\"https:\/\/v4.adventori.com\/\",\"name\":\"ADventori\",\"description\":\"LESS ADS, MORE EFFICIENT ADS\",\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/v4.adventori.com\/search\/{search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage\",\"url\":\"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg\",\"contentUrl\":\"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg\",\"width\":540,\"height\":410},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage\",\"url\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/\",\"name\":\"Carousel ADventori | ADventori\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage\"},\"datePublished\":\"2018-03-29T13:21:06+00:00\",\"dateModified\":\"2018-03-29T13:27:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/v4.adventori.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel ADventori\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage\"},\"author\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/51ce5bf64eb63421fe56ce7c73e096ec\"},\"headline\":\"Carousel ADventori\",\"datePublished\":\"2018-03-29T13:21:06+00:00\",\"dateModified\":\"2018-03-29T13:27:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage\"},\"wordCount\":558,\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg\",\"articleSection\":[\"Composants\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/51ce5bf64eb63421fe56ce7c73e096ec\",\"name\":\"Fabien Delaforge\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Carousel ADventori | ADventori","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"fr_FR","og_type":"article","og_title":"Carousel ADventori | ADventori","og_description":"Documentation DCO Enabler -&gt; ENABLER HTML5 -&gt; Carousel ADventori CR\u00c9ER VOTRE CAROUSEL&nbsp;Vous pouvez cr\u00e9er votre propre Carousel gr\u00e2ce \u00e0 notre enabler et ce de mani\u00e8re tr\u00e8s simple : See the Pen adaptImg V2 by ADventori (@adventori) on CodePen. D\u00e9clarons tous d\u2019abord nos \u00e9l\u00e9ments html:myAd : div qui contiendra notre Publicit\u00e9 .myBrand : div qui contiendra &hellip; Continued","og_url":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/","og_site_name":"ADventori","article_published_time":"2018-03-29T13:21:06+00:00","article_modified_time":"2018-03-29T13:27:15+00:00","og_image":[{"width":540,"height":410,"url":"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg","type":"image\/jpeg"}],"twitter_card":"summary","twitter_creator":"@adventori","twitter_site":"@adventori","twitter_misc":{"Written by":"Fabien Delaforge","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/v4.adventori.com\/#organization","name":"ADventori","url":"https:\/\/v4.adventori.com\/","sameAs":["https:\/\/twitter.com\/adventori"],"logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/","url":"\/media\/Large_Logo-ADventori_Couleur_2015.png","contentUrl":"\/media\/Large_Logo-ADventori_Couleur_2015.png","width":400,"height":133,"caption":"ADventori"},"image":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/v4.adventori.com\/#website","url":"https:\/\/v4.adventori.com\/","name":"ADventori","description":"LESS ADS, MORE EFFICIENT ADS","publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/v4.adventori.com\/search\/{search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage","url":"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg","contentUrl":"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg","width":540,"height":410},{"@type":"WebPage","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage","url":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/","name":"Carousel ADventori | ADventori","isPartOf":{"@id":"https:\/\/v4.adventori.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage"},"datePublished":"2018-03-29T13:21:06+00:00","dateModified":"2018-03-29T13:27:15+00:00","breadcrumb":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/v4.adventori.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Carousel ADventori"}]},{"@type":"Article","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#article","isPartOf":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage"},"author":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/51ce5bf64eb63421fe56ce7c73e096ec"},"headline":"Carousel ADventori","datePublished":"2018-03-29T13:21:06+00:00","dateModified":"2018-03-29T13:27:15+00:00","mainEntityOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#webpage"},"wordCount":558,"publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"image":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/carousel-adventori\/#primaryimage"},"thumbnailUrl":"https:\/\/v4.adventori.com\/media\/ADventori-Carousel.jpg","articleSection":["Composants"],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/51ce5bf64eb63421fe56ce7c73e096ec","name":"Fabien Delaforge"}]}},"_links":{"self":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/9103"}],"collection":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/comments?post=9103"}],"version-history":[{"count":27,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/9103\/revisions"}],"predecessor-version":[{"id":20187,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/9103\/revisions\/20187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media\/11802"}],"wp:attachment":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media?parent=9103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/categories?post=9103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/tags?post=9103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}