Creating Carousels that Work in the Visual Experience Composer

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.

    code language-html
    <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 note
    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.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654