Как сделать блок ST305N в виде слайдера для Tilda

<script>
//Скрываем на старте блок кнопок
   $("[data-record-type='208']").css("display" , "none");

 //Если экран больше 960рх  
   if ($(window).width() > 960){
     //Показываем кнопки и убираем отступ между карточками сницу
      $("[data-record-type='208']").css("display" , "block");
      $(".t776__separator").css("margin-bottom" , "0px");  

//Скроем ненужные карточки после 4-ой
 var y = $("div.t776__col").length-1;
    var x = 4;
   //Проходим все карточки и скрываеем ненужные
    while (x <= y) {
    $(".t776__col:eq("+x+")").css("display" , "none");
  x++;  };
//Создадим функцию для общего скрытия всех карточек  
function hideallcard(){
     x = 0;
   //Проходим все карточки
    while (x <= y) {
    //Скрываем все карточки   
    $(".t776__col:eq("+x+")").css("display" , "none");
  x++;  }; };
//Создаём новые переменные
  var sch = 0; 
  var stop = 0;
//При клике на правкю кнопку
  $('.t142A .t-btn:eq(1)').click(function(){
      //Скрываем все карточки
      hideallcard();
      //Прибавляем шаг
      sch++;
      //Если шаг уже больше 2, то возвращаемся к началу
      if (sch>2) {sch=0};
      //Какой шаг, такой показываем и блок
      if (sch==0) {x=0};
      if (sch==1) {x=4};
      if (sch==2) {x=8};
      //Сколько карточек показываем - четыре
      stop = x+3; 
      //Показываем нужные карточки
      while (x <= stop) {
    $(".t776__col:eq("+x+")").fadeIn(400);
     x++;   }; return false; }); 
     
//При клике на левую кнопку   
  $('.t142A .t-btn:eq(0)').click(function(){
      //Скрываем все карточки
      hideallcard();
      //Шаг назад
      sch--;
      //Если дошли до начала, то переходим в конец
      if (sch<0) {sch=2};
      //Какой шаг, такой показываем и блок
      if (sch==0) {x=0};
      if (sch==1) {x=4};
      if (sch==2) {x=8};
      //Сколько карточек показываем - четыре
      stop = x+3;  
      //Показываем нужные карточки
      while (x <= stop) {
    $(".t776__col:eq("+x+")").fadeIn(400);
     x++;     };return false;  });     };
     
//При изменении размеров экрана   
    $(window).resize(function(){
      //Если экран меньше 960px   
      if ($(window).width() < 960){
        //Скрываем кнопки  
        $("[data-record-type='208']").css("display" , "none"); 
          x = 0;
          //Проходим все карточки
          while (x <= y) {
         //Показываем все карточки   
         $(".t776__col:eq("+x+")").css("display" , "block"); 
         x++;  };  }else{
         //А Если экран больше 960px
         //Показываем кнопки
          $("[data-record-type='208']").css("display" , "block"); 
          x = 0;
          //Проходим все карточки
          while (x <= y) {
          //Скрываем все карточки   
          $(".t776__col:eq("+x+")").css("display" , "none"); 
           x++;  };
          x = 0;
           //Сколько карточек показываем - четыре
           stop = x+3; 
           sch=0;
          //Показываем нужные карточки 4 первых
           while (x <= stop) {
           $(".t776__col:eq("+x+")").css("display" , "block"); 
           x++;   };      };       });     
     
</script>

<style>
/*Две колонки в один ряд*/
@media screen and (max-width: 640px){
.t776__container_mobile-flex .t776__col {
    min-width: 50% !important;
    max-width: 50% !important;
}}

@media screen and (max-width: 480px){
.t776__container_mobile-flex .t776__col {
    min-width: 50% !important;
    max-width: 50% !important;

}}


</style>