Integrate static site for Wordpress

Question

I have a block of code that is a carousel made in CSS and with some classes that make the animations. The problem is, I am integrating to Wordpress so that the client can place the images directly there and I am not able to make the logic on account of these classes.

div id="banner_home">
 <div id="slider_bhome">
  <div id="mascara_bhome">
   <ul>
    <li id="primeiro" class="primeira-anima"><a href="#"><img src=" "/></a></li>
    <li id="segundo" class="segunda-anima"><a href="#"><img src=" "/></a></li>
    <li id="terceiro" class="terceira-anima"><a href=" "><img src=" "/></a></li>
    <li id="quarto" class="quarta-anima"><a href=" "><img src=" "/></a></li>
    <li id="quinto" class="quinta-anima"><a href=" "><img src=" "/></a></li>
    </ul>
  </div>
  <div class="barra-progresso_bhome"></div>
 </div>
</div>

(I just took the name off the pictures)

If I use:

 <?php while(have_rows('principais_produtos')): the_row(); ?>
  <?php if(get_sub_field('principais_produtos')): ?> 
   <ul>
    <li id="primeiro" class="primeira-anima"><a href="#"><img src="<?php echo the_sub_field('imagem') ?>"/></a></li>
   </ul>
  <?php endif; ?>          
 <?php endwhile; ?> 

It works, however all the images that are placed in Wordpress, are on top of the other when it goes to the proxiímo, no more images to display. I believe I need to maintain these classes, "second-anima", "third-anima" and etc so that it works properly.

Has anyone ever done something like this or something that might help?