Slick slider - display title of next slide

<section class="hp-slider">
<div class="home-slider">
      <?php if( have_rows('home-slider') ): ?>
          <?php while( have_rows('home-slider') ): the_row(); ?>
          <?php
                  $imageArray = get_sub_field('image');
                  $imageURL = $imageArray['url'];

                $myslides = get_post_meta( get_the_ID(), 'be_slides', true );
                for( $i = 0; $i < $myslides; $i++) {

    ?>


 <div class="slide-item hero-slider" style="background-image: url(<?php echo $imageURL; ?>)" data-title="<?php the_sub_field('hero-title'); ?>">
           <div class="slider-content">
               <div class="content-wrapper">
          <h2><?php the_sub_field('subtitle');?></h2>
        <h1 class="herohead"> <a href="<?php the_sub_field('hero-url');?>"> <?php the_sub_field('hero-title'); ?></a></h1>
           <div class="hero-content"><?php the_sub_field('hero-content'); ?></div>
               </div>

       </div>
           </div>

<?php
    $next_title = get_post_meta( get_the_ID(), 'be_slides_' . $i + 1 . '_title', true );
if( !empty( $next_title ) )
echo 'Next: ' . $next_title;
}
?>
        <?php endwhile; ?>
      <?php endif; ?>

  </div> <!-- .index-slider -->
<div class="slider-nav">
    <div class="title-cont"><?php echo 'Next: ' . $next_title;?></div>
    <button class="prev slick-arrow"> <i class="icon-arrow-left"></i> </button>
    <button class="next slick-arrow"> <i class="icon-arrow-right"></i> </button>
</div>

</section>