How to highlight jquery code with curly brace { so that it works in tpl (smarty)?

Question

Smarty

I want to embed a beautiful slider in the site template, but due to the fact that there is { in the code, the site gives an error 500.
If the code is put in {literal}, then the error disappears, but the slider does not work.
Here is the code that is causing the slider to not work:

data-frames='[{"from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;","speed":1000,"to":"o:1;","delay":600,"ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'

Please help, I have no idea how to solve the issue.