Show Menu
TOPICS×

Creating Carousels that Work in the Visual Experience Composer

This topic shows how to create a carousel that can be edited in the 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.
    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.