Using a WHILE loop twice / temporarily breaking from a WHILE loop

Question

Background - Built a WordPress website and have utilised ACF Advanced Custom Fields to generate input fields within my pages.

I have then populated the pages fields so I can generate / use this variable:

<?php
    $case_study_image_gallery = get_field('case_study_image_gallery');
?>

I then call the subfield in the while loop, then call the ['url'] when using the variable to break up the image array.

<?php if( $case_study_image_gallery ) : ?>

    <div class="case-study-slider">
        <?php
            while (have_rows('case_study_image_gallery')): the_row();
            $case_study_image = get_sub_field('case_study_image');
        ?>

            <div class="case-study-slide">
                <img class="case-study-slider-image" src="<?php echo $case_study_image['url']; ?>">
            </div>

        <?php endwhile; ?>
    </div>
    <div class="case-study-slider-nav">
        <?php
            while (have_rows('case_study_image_gallery')): the_row();
            $case_study_image = get_sub_field('case_study_image');
        ?>

            <div class="case-study-nav-slide">
                <img class="case-study-slider-nav-image" src="<?php echo $case_study_image['url']; ?>">
            </div>

        <?php endwhile; ?>
    </div>

<?php endif; ?>

As you can see I have broken my while into multiple sections as I need to use the same values for both the slider images and the thumbnail smaller images. In doing so I must place this code between the two uses of the sub field image.

        <?php endwhile; ?>
    </div>
    <div class="case-study-slider-nav">
        <?php
            while (have_rows('case_study_image_gallery')): the_row();
            $case_study_image = get_sub_field('case_study_image');
        ?>

This OBVIOUSLY wont work as the first loop has burnt through the instances of the images.

I am essentially looking for a way to have a break from the loop without restarting / looping through it and triggering the next row of data. Like this:

<?php if( $case_study_image_gallery ) : ?>

<div class="case-study-slider">
    <?php
        while (have_rows('case_study_image_gallery')): the_row();
        $case_study_image = get_sub_field('case_study_image');
    ?>

        <div class="case-study-slide">
            <img class="case-study-slider-image" src="<?php echo $case_study_image['url']; ?>">
        </div>

    <?php 
        HAVE A BREAK FROM THE WHILE; 
    ?>
</div>
<div class="case-study-slider-nav">
    <?php
        CONTINUE WHILE
    ?>

        <div class="case-study-nav-slide">
            <img class="case-study-slider-nav-image" src="<?php echo $case_study_image['url']; ?>">
        </div>

    <?php endwhile; ?>
</div>

I appreciate there are ways to reset the loop once it has completed but I feel there should be a way to utilise the code how I am trying here.

In responce to Simonw16:

<div class="cs-slider">
    <div class="case-study-slider">
        <div class="case-study-slide"><img class="case-study-slider-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/silicone-elastomer-tube.png"></div>
        <div class="case-study-slide"><img class="case-study-slider-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg"></div>
        <div class="case-study-slide"><img class="case-study-slider-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/zirconium-lump.jpg"></div>
    </div>
    <div class="case-study-slider-nav">
        <div class="case-study-nav-slide"><img class="case-study-slider-nav-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/silicone-elastomer-tube.png"></div>
        <div class="case-study-nav-slide"><img class="case-study-slider-nav-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/silicon-sputtering-target.jpeg"></div>
        <div class="case-study-nav-slide"><img class="case-study-slider-nav-image" src="https://localhost/materialshub/wp-content/uploads/2018/09/zirconium-lump.jpg"></div>
    </div>
</div>

Answer 1

You can do something like this?

```

<?php
    $image_urls = [];
    while (have_rows('case_study_image_gallery')): 
        the_row();
        $image_urls[] = get_sub_field('case_study_image');
    endwhile;
?>

<div class="case-study-slider">
    <?php foreach($image_urls as $image_url): ?>
        <div class="case-study-slide">
            <img class="case-study-slider-image" src="<?php echo $image_url; ?>">
        </div>
    <?php endforeach; ?>
</div>

<div class="case-study-slider-nav">
    <?php foreach($image_urls as $image_url): ?>
        <div class="case-study-nav-slide">
            <img class="case-study-slider-nav-image" src="<?php echo $image_url; ?>">
        </div>
    <?php endforeach; ?>
</div>

```