<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 = $('#rec336865817, #rec336865890, #rec336865975'); //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", {
    slidesPerView: 2, //кол-во слайдов на экране, значения: числовое значение
    spaceBetween: 40, //отступ между слайдами, значения: расстояние измеряется в px
    grabCursor: true, //курсор мыши, значения: false | true
    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: 2, //кол-во слайдов на экране
            spaceBetween: 20, //отступ между слайдами
          },
          1200: { //разрешение дисплея, при котором сработает настройка
            slidesPerView: 2, //кол-во слайдов на экране
            spaceBetween: 40, //отступ между слайдами
          }
          //можно добавить еще варианты разрешений, по аналогии с теми, что выше, например
          //1200: {
          //slidesPerView: 4,
          //spaceBetween: 60,
          //grabCursor: false,
        //}
    }
  });
</script>
<style>
  :root {
    --circule-h:20px; /* Высота кружка */
    --circule-w:20px; /* Ширина кружка */
    --circule-gap:20px; /* Отступ между кружками */
    --circule-bg: #000; /* Цвет кружка */
    --circule-bg-active: #ff0303; /* Цвет активного кружка */
  }
  .swiper-button-disabled {
    display: none !important;
  }
  .swiper-container {
    position: absolute;
    display: block;
    margin: 0 !important;
  }
  .swiper-wrapper {
    display: flex !important;
  }
  .next,
  .prev {
    outline: none !important;
    cursor: pointer;
  }
  .swiper-pagination {
    display: flex;
    justify-content: center;
    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;
  }
  .swiper-pagination-bullet-active {
    background: var(--circule-bg-active)!important;
  }
</style>