CodePen Embed - carousel 300x250 disposition example

<head>
    <title>Carousel 300x250</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();">
        <img id="ADventori_logo" src="https://cf-cdn.adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">
        <div id="ADventori_text">All you are looking for is at Yourbrand</div>
      </div>
      <div id="ADventori_myCarousel">       
      </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: 250px;
    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-02.jpg');
}
#ADventori_myBrand::after{
    display: block;
    width: 300px;
    height: 250px;
    content: "";
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.3) 100%);
}
#ADventori_logo{
    position:absolute;
    top : 0px;   
    left: 15px;
    display: block;
    width: 50px;
    height: 50px;
}
#ADventori_text{
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 220px;
    height: 45px;
    padding: 0 10px;    
    text-align: center;
    text-transform: uppercase;
    color: #114454;
}
#ADventori_myCarousel{
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    width:90%;
    height:180px;
    margin: auto;
    padding: 6px;
    background-color: white;
}

/* Carousel */
#adventoriAd{
    width: 100%;
    height: 100%;
}
#adventoriSlides .slide .item{
    height: 150px;
    margin-bottom: 0px;
    border: 1px solid #EC6A6D;
}
#adventoriSlides .slide .item .img_container{
    position:absolute;
    top: 25px;
    left: 20px;
    width: 40%;
    height: 100px;
    margin: auto;
    text-align: center;
}
#adventoriSlides .slide .item .img_container .img_helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#adventoriSlides .slide .item .img_container img{
    display:inline;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
/*Name*/
#adventoriSlides .slide .item .name{
    font-size: 16px;
    font-weight: bold;
    line-height:18px;
    position:absolute;
    top: 20px;
    right: 10px;
    width: 45%;
    height:25px;
    text-align:right;
    text-transform:uppercase;
    color: #EC6A6D;
}
/*Description*/
#adventoriSlides .slide .item .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 .original_price{
    font-size:12px;
    line-height: 15px;
    position: absolute;
    top: 110px;
    right:10px;
    width: 40%;
    height: 15px;
    text-align: center;
    text-align: right;
    text-decoration: line-through;
    color: #114454;
}



/*Price*/
#adventoriSlides .slide .item .price{
    font-family: arial, Verdana, Georgia, sans-Serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    position:absolute;
    top: 80px;
    right:10px;
    width: 40%;
    height: 35px;
    text-align: right;
    color: black;
    color: #EC6A6D;
}

/* discount */
#adventoriSlides .slide .discount{
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
}
#adventoriSlides .slide .discount .bgDiscount{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 80px 80px 0 0 ;
    border-style: solid;
    border-color: #EC6A6D transparent transparent; 
}
#adventoriSlides .slide .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 .textCta{
    font-size: 13px;
    line-height: 13px;
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    width: 40%;
    margin: auto;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    color: white;
    background-color: #EC6A6D;
}
/* Bullets */
#adventoriBullets{ bottom:-5px;}
#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: 152px;
    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:{name:"An Article",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/310-barbecue.png",description:"A description of variable length",price:"99,99",original_price:"125,00",url:"https://www.google.fr/?q=test1",discount:"-15%" }},
        {data:{name:"An Article",img:"https://cf-cdn.adventori.com/lp/enabler/templates/assets/101-ventilateur.png",description:"A description of variable length",price:"149,99",original_price:"",url:"https://www.google.fr/?q=test2",discount:""}},
        {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%"}}
    ]
  });



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

  var carousel = new ADventori.Carousel({
      items: data.items,
      hSplit:1,
      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.