ACF: Flexslider doesn't work when used with repeater field

Hello all I hope someone can help me here. Been spending all night trying to fix this I’m trying to use flexslider with ACF’s repeater field but it doesn’t work.

Here’s my code:

<?php if(get_field('portfolio_items')) : ?>
    <div id="portfolioSlider">
       <ul class="slides">

<li>
                        <?php while(has_sub_field('portfolio_items')) : ?>
                        <div class="col-md-4 wp4">
                          <div class="overlay-effect effects clearfix">
                                <div class="img">
                                  <img src="<?php the_sub_field('portfolio_item_image')['url']; ?>" alt="<?php the_sub_field('portfolio_item_image')['alt']; ?>">
                                  <div class="overlay">
                                    <a href="#"><i class="fa fa-search"></i>View More</a>
                                    <a>x</a>
                                  </div>
                                </div>
                            </div> <!-- END .overlay-effect .effects .clearfix -->
                          <h2><?php the_sub_field('porfolio_item_title'); ?></h2>
                          <p><?php the_sub_field('portfolio_item_description'); ?></p>
                      </div> <!-- END .col-md-4 .wp4 -->
                      <?php endwhile; ?>
                  </li>
         <!-- END .slides -->
    </div> <!-- END .portfolioSlider -->
<?php endif; ?>

Now when I switch the while loop outside of li it’s working fine but the layout is messed up.

Here’s the working Flexslider from html file:
https://tympanus.net/Freebies/HalcyonDaysTemplate/
Check creative minds, creative hearts and creative ideas