Creating Carousels that Work in the Visual Experience Composer

Last update: March 14, 2022

This topic shows how to create a carousel that can be edited in the Adobe Target Visual Experience Composer (VEC).

When you use the steps below, Target always knows that the selected slide will have the ‘selector’ for the correct slide, even if it is changed in the Visual Experience Composer after a few seconds.

  1. Create static HTML placeholders.

    <ul>
<li class="show"> slide 1 </li>
<li class="hidden"> slide 2 </li>
<li class="hidden"> slide 3 </li>
</ul>

  2. Add CSS to design the look and feel.

    Don’t use JavaScript for this.

    NOTE
    The Render Using JavaScript option is currently not supported if it is used along with custom code in the Visual Experience Composer.

  3. Only update the classNames to hide others and show the next with timer/animation.

    Never update the DOM structure using JavaScript.

Previous pageRedirect to a URL
Next pageForm-Based Experience Composer

Target