I have a website with an image carousel that lets users scroll through a set of images, each appearing one at a time.

I am trying to setup an element visibility trigger in Google Tag Manager that fires every time an image appears on screen.

The site code looks like this:

<div class="c-carousel__slides row no-gutters" style="transform: translateX(-608px);")>
     <div class="col-12 c-carousel__slide">
          <div class="picture-loading c-card__pack">
               <picture>
               <img alt="alt" src="https://image1.jpg">
     <div class="col-12 c-carousel__slide">
          <div class="picture-loading c-card__pack">
               <picture>
               <img alt="alt" src="https://image2.jpg">

In Tag Manager, I can easily create a element visibility trigger, however it relies on observing DOM changes. My website HTML however, doesn't have DOM changes when user's scroll through the images - only the style element changes from 0px (starting value), to -608px, -912px, -1216px and -1520px.

With JS, I can pretty easily grab these values:

var z = document.getElementsByClassName('c-carousel__slides row no-gutters')[0].style.transform

But I am not sure how that translates into the element visibility trigger in Tag Manager: