<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var slides = $('#rec360064428, #rec360064622, #rec360064667, #rec360064694'); //id слайдов
  var wrapper = '.mySwiper'; //класс шейпа - область слайдера, присвой шейпу класс mySwiper
  var box = $('.mySwiper .tn-atom').addClass('swiper-wrapper');

  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>
<script>
  var swiper = new Swiper(".mySwiper", {
    
    spaceBetween: 40, //отступ между слайдами, значения: расстояние измеряется в px
    grabCursor: true, //курсор мыши, значения: false | true
    loop:true,
    //autoplay:   {
    //                delay: 3000,//время задержки слайда
    //            },
    navigation: {
      nextEl: ".next", //добавь шейп, загрузи картинку стрелки фоном, присвой класс next
      prevEl: ".prev", //добавь шейп, загрузи картинку стрелки фоном, присвой класс prev
    },
    pagination: {
          el: ".swiper-pagination", //добавь шейп во всю ширину и высотой 20px, присвой класс swiper-pagination
          clickable: true,
        },
    breakpoints: {
          0: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 1, //кол-во слайдов на экране
            spaceBetween: 20, //отступ между слайдами
          },
          480: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 1, //кол-во слайдов на экране
            spaceBetween: 20, //отступ между слайдами
          },
          640: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 1, //кол-во слайдов на экране
            spaceBetween: 20, //отступ между слайдами
          },
          960: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 1, //кол-во слайдов на экране
            spaceBetween: 20, //отступ между слайдами
          },
          1200: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 1, //кол-во слайдов на экране
            spaceBetween: 40, //отступ между слайдами
          }
          //можно добавить еще варианты разрешений, по аналогии с теми, что выше, например
          //1200: {
          //slidesPerView: 4,
          //spaceBetween: 60,
          //grabCursor: false,
        //}
    }
  });
</script>
<script>
    $('span[aria-label="Go to slide 1"]').append('<span>текст 1</span>');
    $('span[aria-label="Go to slide 2"]').append('<span>текст 2</span>');
    $('span[aria-label="Go to slide 3"]').append('<span>текст 3</span>');
    $('span[aria-label="Go to slide 4"]').append('<span>текст 4</span>');
</script>
<style>
  :root {
    --circule-h:auto; /* Высота кружка */
    --circule-w:auto; /* Ширина кружка */
    --circule-gap:20px; /* Отступ между кружками */
    --circule-bg: transparent; /* Цвет кружка */
    --circule-bg-active: transparent; /* Цвет активного кружка */
    --circule-txt:#fff;
    --border-color:#3477fe;
    --radius:30px;
    --font:'Nunito';
  }
  .swiper-container {
    position: absolute;
    display: block;
    margin: 0 !important;
    overflow:hidden;
  }
  .swiper-wrapper {
    display: flex !important;
  }
  .next,
  .prev {
    outline: none !important;
    cursor: pointer;
  }
  .swiper-pagination {
    display: flex;
    justify-content: flex-start;
    gap: var(--circule-gap);
  }
  .swiper-pagination-clickable .swiper-pagination-bullet {
    height: var(--circule-h);
    width: var(--circule-w);
    background: var(--circule-bg);
    opacity: 1!important;
    outline: none !important;
    color:var(--circule-txt);
    padding: 8px 12px;
    margin:0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family:var(--font);
    border:solid 1px var(--border-color);
    border-radius:var(--radius);
    transition: all 600ms ease;
    position:relative;
    overflow:hidden;
  }
  .swiper-pagination-clickable .swiper-pagination-bullet::before {
        position: absolute;
        content: '';
        width: 0%;
        height: 100%;
        background: linear-gradient(to right, #f02885, #e038ab, #c24fce, #9265eb, #3378ff);
        top: 0;
        left: auto;
        right: 0;
        z-index: -1;
        transition: all 600ms ease;
        border-radius: var(--radius);
  }
  .swiper-pagination-bullet-active {
    background: var(--circule-bg-active)!important;
  }
  .swiper-pagination-bullet-active::before {
        position: absolute;
        content: '';
        width: 100%!important;
        height: 100%;
        background: linear-gradient(to right, #f02885, #e038ab, #c24fce, #9265eb, #3378ff);
        top: 0;
        left: 0!important;
        right: 0!important;
        z-index: -1;
        border-radius: var(--radius);
  }

</style>