Using Cycle2.js for a dynamic CMS thumbnail slider


I’m currently integrating a custom thumbnail slider usng Cycle2.js and it’s working great except for the fact that it doesn’t pull the correct URL link of the images to display as thumbnails.

This is what I used for the custom attribute:

Name: data-cycle-pager template

Here is a screenshot of the inspect mode in Chrome:

It gets the URL but it formats it wrongly I think.
Does anyone know what might cause this? Btw here is the webflow guide on how to use cycle2.js:
I’m trying to do the " CMS Slider with Automatic Image Thumbnail "

The slider on my page can be found on the Product Page Template if you scroll down a bit. I just started building it right below the current slider / product info.

Here is my site Read-Only:

Addition: It formats the code wrongly, here is the VALUE: <a href='#'><img src='{{children.0.src}}' width=100% height=auto></a>