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>

1 REPLY 1
David_Myers
Level 3

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.