How to prevent rendering divs in a for loop?

How to prevent rendering divs in a for loop?

davincecode
Visitor
1 0 0

Hello, I'm new to Shopify and I need some advise. I could not figure how to avoid divs.

 

Screen Shot 2022-08-19 at 12.22.17 PM.png

 

Here's my code:

<div class="carousel-container shimmer">
      <ul class="carousel product-carousel">
        {%- for productImage in product.images -%}
        <li>
          <img
            class="lazy"
            src="data&colon;image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
            data-color="{{ productImage.variants[0][color_property] }}"
            data-slide="{{ forloop.index0 }}"
            data-src="{{
              productImage
                | img_url: '500x500'
                | remove: 'https:'
                | split: '?v'
                | first
            }}"
            alt="Image {{ forloop.index }}"
            draggable="false"
            width="500"
            height="500"
          />
        </li>
        {%- endfor -%}
      </ul>
      <div class="carousel-nav carousel-nav--vertical">
        <span class="carousel-btn prev-img nav-btn"><i class="fa fa-1-5x fa-chevron-up" aria-hidden="true">
          </i></span>
        <ul class="carousel-nav-list">
          {%- for productImage in product.images -%}
          <li class="carousel-nav-item" data-slide="{{ forloop.index0 }}">
            <img
              class="lazy"
              src="data&colon;image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
              data-color="{{ productImage.variants[0][color_property] }}"
              data-src="{{
                productImage
                  | img_url: '70x70'
                  | remove: 'https:'
                  | split: '?v'
                  | first
              }}"
              alt="Image {{ forloop.index }}"
              draggable="false"
              width="70"
              height="70"
            />
          </li>
          {%- endfor -%}
        </ul>
        <span class="carousel-btn next-img nav-btn"
          ><i class="fa fa-1-5x fa-chevron-down" aria-hidden="true"></i
        ></span>
      </div>
      <div style="clear: both"></div>
    </div>

 

And this is my Goal:

Screen Shot 2022-08-17 at 2.53.35 PM.png

Replies 0 (0)