Image Carousel Using these PHP Arguments In An Array

Question

I have been trying for a long time to create an image carousel with the code that is displaying below but i cant seem to figure it out. The current code displays all the images(in the array) in a list view; anyone have any insights as to how i would go about this?

        <?php

        $images = get_custom_field( 'project_pictures' );

if ( is_array( $images ) && ! empty( $images ) ){

    foreach( $images as $image ){
        $thumbnail_id = get_attachment_id_from_url( $image );
        $thumbnail = wp_get_attachment_image( $thumbnail_id );
        echo "<a href=\"{$image}\"><img src=\"{$thumbnail}\"></a>";

    }

} elseif( ! empty( $images ) ){

    $thumbnail_id = get_attachment_id_from_url( $images );
    $thumbnail = wp_get_attachment_thumb_url( $thumbnail_id );
    echo "<a href=\"{$images}\"><img src=\"{$thumbnail}\"></a>";
    //------------------------------------------New code Here// 
}   
        ?>  
////carousel code

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=" <?php echo "<a href=\"{$image}\"><img src=\"{$thumbnail}\"></a>";" ?> alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="echo "<a href=\"{$image}\"><img class=\"d-block w-100\" src=\"{$thumbnail}\" alt=\"Slide {$thumbnail_id}\"></a>";" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Answer 1

You are looping and printing it before the carousel structure... You need to loop it within the carousel structure... See:

   <?php
        // GET CAROUSEL IMAGES ARAY
        $images = get_custom_field( 'project_pictures' );
        //CHECK IF THERE IS IMAGES
        if ( !empty( $images ) ):
    ?>
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <?php
                //LOOP CAROUSEL IMAGES
                foreach( $images as $key => $image ):
                    $thumbnail_id = get_attachment_id_from_url( $image );
                    $thumbnail = wp_get_attachment_image( $thumbnail_id );
                ?>
                    <div 
                        class="carousel-item <?php 
                        //check if is the first carousel item to activate it
                        echo ($key==0)?'active':'';?>"
                    >
                        <a href="<?php echo $image; ?>">
                            <img 
                                class="d-block w-100" 
                                src="<?php echo $thumbnail; ?>" 
                                alt="Slide <?php echo $thumbnail_id; ?>"
                            >
                        </a>
                    </div><!-- .carousel-item -->
                <?php endforeach; ?>
            </div><!-- .carousel-inner -->
        </div><!-- .carousel -->
    <?php endif; ?>