title: Big Catel: How Do You Show/Pull all Product Images on product page?
body: <p>I have added a Image Carousel (with thumbnails) to all of the individual product page(s) [via the product.html file]</p>
  <p>I used the <code>{{ image | product_image_url | constrain: 500 }}</code> code, but it's only pulling the first product image when there are 2-5 product images. (see how it's showing on website: <a href="https://ibb.co/album/yBLNWH" rel="nofollow noreferrer">https://ibb.co/album/yBLNWH</a>)</p>
  <p>How do I get it to pull all? Code is below. (ps. other images are placeholders from coding)</p>
  <pre><code>&lt;div class=&quot;slider-container&quot;&gt;
    &lt;div class=&quot;carousel&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;pslides&quot; checked=&quot;checked&quot; id=&quot;slide-1&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;pslides&quot; id=&quot;slide-2&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;pslides&quot; id=&quot;slide-3&quot;&gt;
     &lt;input type=&quot;radio&quot; name=&quot;pslides&quot; id=&quot;slide-4&quot;&gt;
      &lt;ul class=&quot;carousel__slides&quot;&gt;
        &lt;!--- SLIDE 1 ---&gt;  
       &lt;li class=&quot;carousel__slide&quot;&gt;
        &lt;div&gt;
         &lt;img
          alt=&quot;{{ product.name | escape }}&quot;
          src=&quot;{{ product.image | product_image_url | constrain: 100 }}&quot;
          data-srcset=&quot;
            {{ 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
          &quot;
          data-sizes=&quot;auto&quot;
        &gt;
        &lt;/div&gt;
       &lt;/li&gt;
       &lt;!--- SLIDE 2 ---&gt;
       &lt;li class=&quot;carousel__slide&quot;&gt;
        &lt;div&gt;
         &lt;img src=&quot;https://picsum.photos/id/1051/800/450&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
       &lt;/li&gt;
       &lt;!--- SLIDE 3 ---&gt;
       &lt;li class=&quot;carousel__slide&quot;&gt;
        &lt;div&gt;
         &lt;img src=&quot;https://picsum.photos/id/1044/800/450&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
       &lt;/li&gt;
       &lt;!--- SLIDE 4 ---&gt;
       &lt;li class=&quot;carousel__slide&quot;&gt;
        &lt;div&gt;
         &lt;img src=&quot;https://picsum.photos/id/1045/800/450&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
       &lt;/li&gt;
      &lt;/ul&gt;    
  
      &lt;!--- THUMBNAILS  ---&gt;
      &lt;ul class=&quot;carousel__thumbnails&quot;&gt;
       &lt;li&gt;
        &lt;label for=&quot;slide-1&quot;&gt;&lt;img
                  alt=&quot;{{ product.name | escape }}&quot;
                  src=&quot;{{ image | product_image_url | constrain: 20 }}&quot;
                  data-srcset=&quot;
                    {{ 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,
                  &quot;
                  data-sizes=&quot;auto&quot;
                &gt;&lt;/label&gt;
       &lt;/li&gt;
       &lt;li&gt;
        &lt;label for=&quot;slide-2&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/1051/800/450&quot; alt=&quot;&quot;&gt;&lt;/label&gt;
       &lt;/li&gt;
       &lt;li&gt;
        &lt;label for=&quot;slide-3&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/1044/150/150&quot; alt=&quot;&quot;&gt;&lt;/label&gt;
       &lt;/li&gt;
       &lt;li&gt;
        &lt;label for=&quot;slide-4&quot;&gt;&lt;img src=&quot;https://picsum.photos/id/1045/150/150&quot; alt=&quot;&quot;&gt;&lt;/label&gt;
       &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>