Re: Can an In Zone web campaign have a carousel?

Anonymous
Not applicable

Can an In Zone web campaign have a carousel?

Has anybody coded a carousel into an In Zone web campaign? I've tried a couple of things to try to make it happen but when I got to preview, it doesn't show up. Let me know if you have any suggestions. Thanks!

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing:border-box}

body {font-family: Verdana,sans-serif;}

.mySlides {display:none}

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

/* 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 {

  height: 13px;

  width: 13px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}

.active {

  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) {

  .text {font-size: 11px}

}

</style>

<div class="slideshow-container">

<div class="mySlides fade" style="display: none;">

  <div class="numbertext">1 / 3</div>

  <img src="http://go.monotype.com/rs/396-BOK-818/images/Future-Proof_product_Maturity_Banner.jpg" style="width:100%">

  <div class="text">Caption Text</div>

</div>

<div class="mySlides fade" style="display: none;">

  <div class="numbertext">2 / 3</div>

  <img src="http://go.monotype.com/rs/396-BOK-818/images/Future-Proof_product_Maturity_Banner.jpg" style="width:100%">

  <div class="text">Caption Two</div>

</div>

<div class="mySlides fade" style="display: block;">

  <div class="numbertext">3 / 3</div>

  <img src="http://go.monotype.com/rs/396-BOK-818/images/Future-Proof_product_Maturity_Banner.jpg" style="width:100%">

  <div class="text">Caption Three</div>

</div>

</div>

<br>

<div style="text-align:center">

  <span class="dot"></span>

  <span class="dot"></span>

  <span class="dot active"></span>

</div>

<script>

var slideIndex = 0;

showSlides();

function showSlides() {

    var i;

    var slides = document.getElementsByClassName("mySlides");

    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {

       slides[i].style.display = "none"; 

    }

    slideIndex++;

    if (slideIndex> slides.length) {slideIndex = 1}   

    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";

    setTimeout(showSlides, 5000); // Change image every 5 seconds

}

</script>

</body>

</html>

2 REPLIES 2
David_Myers
Level 4

Re: Can an In Zone web campaign have a carousel?

Yes, you can create a carousel in an In Zone Campaign for Web Personalization.

1. If you have ID on specific slides in the carousel, this can also be changed with an In Zone. If you replacing the whole carousel, make sure you have the correct ID placement identified on the page that replaces the whole area where the carousel is displayed.

2. Add the necessary Carousel code: HTML / Any Javascript needed for the carousel effect / CSS to the HTML code of the Web Campaign Editor.

3. Make sure you previewing your Web Campaigns with the browser add-on (for Chrome or Firefox), this will provide a more accurate experience as to how the personalized campaign shows up.

Daniel_Carroll4
Level 1

Re: Can an In Zone web campaign have a carousel?

Hi David, not sure if you are still there, but this thread is helpful where there is very little help within the community regarding in zone WP executions.

 

I have a couple of questions if you could help:

  • We are setting up an in zone takeover of a hero banner, which includes Hero Image, Hero Text and Hero CTA Button - is this 3x divs on this page, or can it be all done in 1?
  • For the hero image in this example, the website we are working with has 3x breakpoints for different screen sizes. Our Campaign has 3x images for the in zone takeover we want to serve based on screen size. We have been told by Marketo we have to have 3x campaigns to do this and do it based on segmentation for e.g. audience coming from mobile - which seems dumb. Can this not be done just using source code in the one in zone web campaign - showing image A is screen size of viewer is between x-x etc.?

Thanks