Carousel ads

Carousel Ads


Carousel Ads are available through AdButler using our Custom HTML Ad Item. Using Custom HTML or Native Templates, you can create carousel ads that can be formatted to your specific use case. In this sample, we use a public style sheet available through w3schools.com

We recommend creating a Dynamic Zone (Publisher->Add Zone->Dynamic), and then creating a Dynamic Ad Campaign under your advertisers for your carousel.

In this example, we use a Native Template, with 6 variables.

You will need to create a new Native Template, and create the following variables + types:

This carousel is creating using 3 images in the carousel, you can add additional images, creating the corresponding Images and Destinations, and adding the following code to the DIV elements, where X is the new number of items in your carousel.
<div class="mySlides fade">
  <div class="numbertext">Advertisement X</div>
  <a href="[TRACKING_LINK][%Destination X%]" target="_blank"><img src="[%Image X%]" style="width:100%"></a>
</div>

Carousel Native Template:


<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">Advertisement 1</div>
  <a href="[TRACKING_LINK][%Destination 1%]" target="_blank"><img src="[%Image 1%]" style="width:100%"></a>
</div>

<div class="mySlides fade">
  <div class="numbertext">Advertisement 2</div>
  <a href="[TRACKING_LINK][%Destination 2%]" target="_blank"><img src="[%Image 2%]" style="width:100%"></a>
</div>

<div class="mySlides fade">
  <div class="numbertext">Advertisement 3</div>
  <a href="[TRACKING_LINK][%Destination 3%]" target="_blank"><img src="[%Image 3%]" style="width:100%"></a>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

Making Changes:


You can use Custom CSS to adjust and style the carousel.


Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.