Big Catel: How Do You Show/Pull all Product Images on product page?

Question

I have added a Image Carousel (with thumbnails) to all of the individual product page(s) [via the product.html file]

I used the {{ image | product_image_url | constrain: 500 }} code, but it's only pulling the first product image when there are 2-5 product images. (see how it's showing on website: https://ibb.co/album/yBLNWH)

How do I get it to pull all? Code is below. (ps. other images are placeholders from coding)

<div class="slider-container">
  <div class="carousel">
   <input type="radio" name="pslides" checked="checked" id="slide-1">
   <input type="radio" name="pslides" id="slide-2">
   <input type="radio" name="pslides" id="slide-3">
   <input type="radio" name="pslides" id="slide-4">
    <ul class="carousel__slides">
      <!--- SLIDE 1 --->  
     <li class="carousel__slide">
      <div>
       <img
        alt="{{ product.name | escape }}"
        src="{{ product.image | product_image_url | constrain: 100 }}"
        data-srcset="
          {{ product.image | product_image_url | constrain: 400 }} 400w,
          {{ product.image | product_image_url | constrain: 460 }} 460w,
          {{ product.image | product_image_url | constrain: 530 }} 530w,
          {{ product.image | product_image_url | constrain: 800 }} 800w,
          {{ product.image | product_image_url | constrain: 1050 }} 1050w,
          {{ product.image | product_image_url | constrain: 1300 }} 1300w,
          {{ product.image | product_image_url | constrain: 1500 }} 1500w,
          {{ product.image | product_image_url | constrain: 1800 }} 1800w
        "
        data-sizes="auto"
      >
      </div>
     </li>
     <!--- SLIDE 2 --->
     <li class="carousel__slide">
      <div>
       <img src="https://picsum.photos/id/1051/800/450" alt="">
      </div>
     </li>
     <!--- SLIDE 3 --->
     <li class="carousel__slide">
      <div>
       <img src="https://picsum.photos/id/1044/800/450" alt="">
      </div>
     </li>
     <!--- SLIDE 4 --->
     <li class="carousel__slide">
      <div>
       <img src="https://picsum.photos/id/1045/800/450" alt="">
      </div>
     </li>
    </ul>    

    <!--- THUMBNAILS  --->
    <ul class="carousel__thumbnails">
     <li>
      <label for="slide-1"><img
                alt="{{ product.name | escape }}"
                src="{{ image | product_image_url | constrain: 20 }}"
                data-srcset="
                  {{ image | product_image_url | constrain: 200 }} 200w,
                  {{ image | product_image_url | constrain: 400 }} 400w,
                  {{ image | product_image_url | constrain: 550 }} 550w,
                  {{ image | product_image_url | constrain: 650 }} 650w,
                  {{ image | product_image_url | constrain: 800 }} 800w,
                "
                data-sizes="auto"
              ></label>
     </li>
     <li>
      <label for="slide-2"><img src="https://picsum.photos/id/1051/800/450" alt=""></label>
     </li>
     <li>
      <label for="slide-3"><img src="https://picsum.photos/id/1044/150/150" alt=""></label>
     </li>
     <li>
      <label for="slide-4"><img src="https://picsum.photos/id/1045/150/150" alt=""></label>
     </li>
    </ul>
  </div>
  </div>