求问liquid代码问题！

[HKR]

{% assign related_keys = "related_antenna,related_batteries,related_charger,related_remote_speaker_mics,related_earpieces,related_carry_accessories" | split: ',' %}
{% assign related_labels = "Antenna,Batteries,Chargers,Microphones,Earpieces,Carry Attachments" | split: ',' %}

<div class="related-products-container">
<ul class="related-products-menu"><b>Accessories:</b>
{% for index in (0..related_keys.size ) %}
{% assign key = related_keys[index] %}
{% assign label = related_labels[index] %}
{% assign related_products = product.metafields.custom[key] %}
{% if related_products %}
<li><a href="#" class="related-products-tab{% if forloop.first %} active{% endif %}" data-key="{{ key }}">{{ label }}</a></li>
{% endif %}
{% endfor %}
</ul>

{% for index in (0..related_keys.size ) %}
{% assign key = related_keys[index] %}
{% assign label = related_labels[index] %}
{% assign related_products = product.metafields.custom[key] %}
{% if related_products %}
<div class="related-products-content{% if forloop.first %} active{% endif %}" id="{{ key }}">
<div class="carousel">
<div class="carousel-arrow left">&lt;</div>
<div class="carousel-track-container">
<div class="carousel-track">
{% assign related_product_handles = related_products.value | split: ',' %}
{% for handle in related_product_handles %}
{% assign related_product = all_products[handle] %}
{% if related_product %}
<div class="related-product">
<a href="{{ related_product.url }}">
<img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
<p>{{ related_product.title }}</p>
</a>
</div>
{% else %}
<p>Related product not found: {{ handle }}</p>
{% endif %}
{% endfor %}
</div>
</div>
<div class="carousel-arrow right">&gt;</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const tabs = document.querySelectorAll(".related-products-tab");
const contents = document.querySelectorAll(".related-products-content");
const carousels = document.querySelectorAll(".carousel");

tabs.forEach(tab => {
tab.addEventListener("click", function(e) {
e.preventDefault();
const key = this.getAttribute("data-key");

tabs.forEach(t => t.classList.remove("active"));
contents.forEach(c => c.classList.remove("active"));

this.classList.add("active");
document.getElementById(key).classList.add("active");
});
});

carousels.forEach(carousel => {
const leftArrow = carousel.querySelector(".carousel-arrow.left");
const rightArrow = carousel.querySelector(".carousel-arrow.right");
const trackContainer = carousel.querySelector(".carousel-track-container");
const track = carousel.querySelector(".carousel-track");

let scrollAmount = 0;

function getItemWidth() {
if (window.innerWidth <= 768) {
return trackContainer.clientWidth / 2;
} else {
return trackContainer.clientWidth / 3;
}
}

leftArrow.addEventListener("click", () => {
const itemWidth = getItemWidth();
scrollAmount -= itemWidth;
if (scrollAmount < 0) {
scrollAmount = 0;
}
trackContainer.scrollTo({
top: 0,
left: scrollAmount,
behavior: 'smooth'
});
});

rightArrow.addEventListener("click", () => {
const itemWidth = getItemWidth();
scrollAmount += itemWidth;
if (scrollAmount > track.scrollWidth - trackContainer.clientWidth) {
scrollAmount = track.scrollWidth - trackContainer.clientWidth;
}
trackContainer.scrollTo({
top: 0,
left: scrollAmount,
behavior: 'smooth'
});
});

window.addEventListener("resize", () => {
scrollAmount = 0;
trackContainer.scrollTo({
top: 0,
left: scrollAmount,
behavior: 'smooth'
});
});
});
});
</script>

这是我的商品配件代码的显示部分，原理是通过产品元字段的产品句柄的引用来实现配件产品的展示。

但是我发现了当我产品数量总数到达20个时（所有种类产品总和），后面的第21,22....所有产品都重复第20个产品，请问这是什么原因，时因为liquid语言的数组的大小最大就是20吗？有人可以帮我解决这个问题吗？

[HKR]

谁可以帮帮我