Amaç

Ürün listesinde birden fazla görseli olan ürünlerde, görseller arası geçiş (slider) için sayfalama noktalarını (pagination bullets) oluşturur.

Kullanım

Ürünün resim alanındaki standart kod yerine aşağıdaki snippet çağrılabilir:

{{ snippet('product-image-slider') }}

Snippet içeriği

{% if P.IMAGE_LIST|length > 1 %}
  <div class="absolute bottom-2 start-0 w-full z-[2]" hidden>
    <div class="product-image-slider-pagination flex justify-center items-center">
      {% for IMAGE in P.IMAGE_LIST %}
        <div class="swiper-pagination-bullet {% if loop.index == 1 %}swiper-pagination-bullet-active{% endif %}"></div>
      {% endfor %}
    </div>
  </div>
{% endif %}

Davranış

• Varsayılan durumda sayfalama noktaları gizlidir (hidden).
• Ürün kartında hover ile slider etkinleştiğinde noktalar dinamikleşir.
• En az iki görsel (P.IMAGE_LIST|length > 1) varsa çalışır.