{#

Element ID: Element18
Element Name: AR experience

#}

 <section class="ar-experience hide-desktop">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="ar-tabs">
            {% for item in element.ar_models %}
                <div data-ar-model="item-{{loop.index}}" class="ar-tabs__item{% if loop.index == 1 %} active{% endif %}">{{item.name}}</div>
            {% endfor %}
          </div>
            {% for item in element.ar_models %}
                <img data-ar-img="item-{{loop.index}}" class="ar-experience__img{% if loop.index == 1 %} active{% endif %}" src="{{ TimberImage(item.image).src }}" alt="{{ TimberImage(item.image).alt }}">
            {% endfor %}
          <div class="btn-center">
            <button class="btn btn--gradient w-100" id="start-ar-demo">{{element.button_label}}</button>
          </div>
        </div>
      </div>
    </div>
  </section>
    {% for item in element.ar_models %}
        <model-viewer class="u-hidden model-viewer" data-ar-viewer="item-{{loop.index}}" id="{% if loop.index == 1 %}active-viewer{% else %}{% endif %}" src="{{ item.glb_file }}?sound={{ item.sound }}" ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto" camera-controls alt="A 3D model of Oxy" skybox-image="" ios-src="{{ item.usdz_file }}"></model-viewer>
    {% endfor %}