Javascript 循环浏览悬停在液体中的图像

嗨，我在液体中的编码是相当新的。我有一个项目，我想创建一个360度的产品展示，当鼠标悬停在它上面时，它会在图像中循环。当鼠标悬停在产品中的总图像数量上时，如何启动某种增量来增加一个变量来更改图像url

我是否将javascript与液体混合？但我知道Liquid是一个后端模板，我不确定它是否能工作

let test = document.getElementById("product-attr");

test.addEventListener("mouseover", function( event ) {
  /* for loop increment to loop through images based on length of product images array*/
  , false);

或者使用液体，但是当我在图像上悬停时，我将如何循环

{% assign collection = collections[section.settings.collection] %}

{% for product in collection.products %}
    <img src="//cdn.shopify.com/s/files/products/1.png" alt="Test">
{% endfor %}

{%assign collection=collections[section.settings.collection]}
{%用于集合中的产品。产品%}
{%endfor%}