CodePen Embed - caroussel example 300x600

<head>
    <title>Carousel 300x600</title>
    <meta name="ad.size" content="width=300,height=600" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://adventori.com/lp/enabler/ADventori-2.0.0.js" crossorigin="anonymous" type="text/javascript"></script>
</head>
<body>
    <div id="ADventori_myAd">
      <div id="ADventori_myBrand" onclick="ADventori.click();">
        <div id="ADventori_logoContainer">
          <img src="https://cf-cdn.adventori.com/lp/enabler/templates/assets/logo_blanc.svg">
        </div>
      </div>
      <div id="ADventori_myContent">
        <div id="ADventori_content"  onclick="ADventori.click();">
          <div id="ADventori_text">All you are looking for is at Yourbrand</div>
        </div>            
        <div id="ADventori_myCarousel"></div> 
      </div>                
    </div>
</body>

 @import url("https://adventori.com/lp/enabler/ADventori-2.0.0.css") ;
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

#ADventori_myAd{
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 600px;
    cursor:pointer;
    border: solid 1px black;    
    background-color: #ffffff;
    margin:0 auto;
}
#ADventori_myBrand{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/bg-03.jpg');
}
#ADventori_myBrand::after{
    display: block;
    width: 300px;
    height: 600px;
    content: "";
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.3) 100%);
}
#ADventori_logoContainer{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    padding: 25px 10px;
    z-index: 100;
    background-color: #114454;
}

#ADventori_logoContainer img{
    width: 55px;
    height: 25px;
    margin: 0 auto;
}
#ADventori_myContent{
    position: absolute;
    top: 80px;
    left: 0;
    width:100%;
    height:520px;
}
#ADventori_content{
    width: 100%;
    height: 100%;
}
#ADventori_text{
    text-align: center;
    color: #114454;
    font-size: 17px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase; 
    position: absolute;
    top: 10px;
    width: 100%;
    padding: 0 10px;
    height: 40px;
}

#ADventori_myCarousel{
    position: absolute;
    top: 65px;
    right: 0;
    left: 0;
    width:90%;
    height:440px;
    margin: auto;
    padding: 10px;
    background-color: white;
}


/* Carousel */
#adventoriAd{
    width: 100%;
    height: 100%;
}
#adventoriSlides .slide .item{
    height: 195px;
    margin-bottom: 30px;
    border: 1px solid #EC6A6D;    
}
#adventoriSlides .slide .item .product, #adventoriSlides .slide .item .tuto{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

/* Product */
#adventoriSlides .slide .item .product .img_container{
    position:absolute;
    top: 40px;
    left: 20px;
    width: 40%;
    height: 100px;
    margin: auto;
    text-align: center;
}
#adventoriSlides .slide .item .product .img_container .img_helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#adventoriSlides .slide .item .product .img_container img{
    display:inline;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
#adventoriSlides .slide .item .product .name{
    font-size: 16px;
    font-weight: bold;
    line-height:18px;
    position:absolute;
    top: 15px;
    right: 10px;
    width: 65%;
    height:25px;
    text-align:right;
    text-transform:uppercase;
    color: #EC6A6D;
}
#adventoriSlides .slide .item .product .description{
    font-size: 11px;
    line-height: 12px;
    position: absolute;
    top: 50px;
    right: 10px;
    width: 45%;
    height: 25px;
    text-align:right;
    color: #114454;
}
/*Original price*/
#adventoriSlides .slide .item .product .original_price{
    font-size:12px;
    line-height: 15px;
    top: 115px;
    right:10px;
    width: 40%;
    height: 15px;
    text-align: center;
    text-align: right;
    text-decoration: line-through;
    color: #353535;
    color: #114454;
    position: absolute;
}



/*Price*/
#adventoriSlides .slide .item .product .price{
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    position:absolute;
    top: 85px;
    right:10px;
    width: 40%;
    height: 35px;
    text-align: right;
    color: black;
    color: #EC6A6D;
}

/* discount */
#adventoriSlides .slide .item .product .discount{
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
}
#adventoriSlides .slide .item .product .discount .bgDiscount{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 80px 80px 0 0 ;
    border-style: solid;
    border-color: #EC6A6D transparent transparent; 
}
#adventoriSlides .slide .item .product .discount .valueDiscount{
    font-size: 19px;
    font-weight: bold;
    line-height: 19px;
    position: absolute;
    top: 14px;
    left: 2px;
    width: 45px;
    height: 19px;
    color: white;
}
#adventoriSlides .slide .item .product .textCta{
    font-size: 13px;
    line-height: 15px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background-color: #EC6A6D;
    width: 50%;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
}

/* Tuto */

#adventoriSlides .slide .item .tuto .img_container{
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
}

#adventoriSlides .slide .item .tuto .img_container .img_helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#adventoriSlides .slide .item .tuto .img_container .img_helper::before{
    content:"";
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#adventoriSlides .slide .item .tuto .img_container .img_helper::after{
    content:"";
    background:url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/lecteur_light.svg') center center no-repeat;
    background-size: 25% 25%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#adventoriSlides .slide .item .tuto .img_container img{
    display:inline;
    max-height: 100%;
    vertical-align: middle;
}

#adventoriSlides .slide .item .tuto .name{
    font-size: 16px;
    font-weight: bold;
    line-height:18px;
    position:absolute;
    bottom: 25px;
    right: 0px;
    left: 0px;
    width: 90%;
    height:35px;
    margin: auto;
    text-align:center;
    text-transform:uppercase;
    color: white;
    z-index: 10;
}
#adventoriSlides .slide .item .tuto .description{
    font-size: 16px;
    font-weight: bold;
    line-height:18px;
    position:absolute;
    top: 25px;
    right: 0px;
    left: 0px;
    width: 90%;
    height:35px;
    margin: auto;
    text-align:center;
    text-transform:uppercase;
    color: white;
    z-index: 10;
}
#adventoriSlides .slide .item .tuto .original_price, #adventoriSlides .slide .item .tuto .price, #adventoriSlides .slide .item .tuto .discount, #adventoriSlides .slide .item .tuto .textCta{
    display: none;
}



/* Bullets */
#adventoriBullets{ bottom:47%;}
#adventoriBullets > label{ color:#5EBEBB;text-shadow: none;}
#adventoriBullets > label:hover{ color:#EC6A6D; }
#adventoriBullets > label.active{ color:#114454; }

/* Navigation */

#adventoriNav > label{
    width: 16px;
    height: auto;
    height: 16px;
    margin-top: 203px;    
    padding-top: 0px;
    opacity: 1;
    border-radius: 50%;
}

#ADventori_myCarousel .arrowPrev{        
    width: 16px;
    height: 16px;
    transition: all 0.2s ease-out;
    background: url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/chevron_vert_gauche.svg') center center no-repeat;
    background-size: cover;
}
#ADventori_myCarousel .arrowPrev:hover{
    transition: all 0.2s ease-out;
    background: url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/chevron_corail_gauche.svg') center center no-repeat;
    background-size: cover;
}
#ADventori_myCarousel .arrowNext{        
    width: 16px;
    height: 16px;
    transition: all 0.2s ease-out;
    background: url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/chevron_vert_droit.svg') center center no-repeat;
    background-size: cover;
}
#ADventori_myCarousel .arrowNext:hover{
    transition: all 0.2s ease-out;
    background: url('https://cf-cdn.adventori.com/lp/enabler/templates/assets/chevron_corail_droit.svg') center center no-repeat;
    background-size: cover;
}

 /****** DYNAMISATION ******/   
    
  //Data initialisation
    var data = ADventori.initData({
      items: [
        {data:{type:"product",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:{type:"product",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:{type:"product",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%"}},
        {data:{type:"tuto",name:"Tutorial",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/tuto-bricolage.jpg",description:"Home Improvement",price:"",original_price:"",url:"https://www.google.fr/?q=test6",discount:""}}
      ]
    });



  
/****** CAROUSEL ******/    
    ADventori.Carousel.prototype.initSlide = function(data) {
    var result = '<div class="'+data.type+'">';
    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;
  };

  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:'CTA'
  });

    ADventori.Display.adaptText(document.getElementsByClassName('name'), 12);
    ADventori.Display.adaptText(document.getElementsByClassName('description'), 8);
    ADventori.Display.verticalAlign(document.getElementsByClassName('name'));

This Pen is owned by ADventori on CodePen.

See more by @adventori on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.