<script>
  var slides = $('#rec352079434, #rec352079544, #rec352080777, #rec352081505, #rec352082280');//id zero слайдов
  var wrapper = '.iBlockWrap'; //класс шейпа - область слайдера, присвой шейпу класс iBlockWrap
  var box = $('.iBlockWrap .tn-atom').addClass('swiper-wrapper');
  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>
<script>
    var tabFirst = $('.btn-tab-1').addClass('active');
    var tabSecond = '.btn-tab-2';
    var tabThird = '.btn-tab-3';
    var tabFourth = '.btn-tab-4';
    var tabFifth = '.btn-tab-5';
    
    $(tabFirst).on('click', function(){//при клике на кнопку 1
        $(this).addClass('active');//присваиваем класс активной кнопки
        $(tabSecond).removeClass('active');
        $(tabThird).removeClass('active');
        $(tabFourth).removeClass('active');
        $(tabFifth).removeClass('active');
        iBlockWrap.updateSize();
        iBlockWrap.updateSlides();
        iBlockWrap.update();
        iBlockWrap.slideTo(0);//подгоняем слайд 1
    });
    $(tabSecond).on('click', function(){//при клике на кнопку 2
        $(this).addClass('active');//присваиваем класс активной кнопки
        $(tabFirst).removeClass('active');//убираем класс активной кнопки
        $(tabThird).removeClass('active');//убираем класс активной кнопки
        $(tabFourth).removeClass('active');//убираем класс активной кнопки
        $(tabFifth).removeClass('active');//убираем класс активной кнопки
        iBlockWrap.updateSize();
        iBlockWrap.updateSlides();
        iBlockWrap.update();
        iBlockWrap.slideTo(1);//подгоняем слайд 2
    });
    $(tabThird).on('click', function(){//при клике на кнопку 3
        $(this).addClass('active');//присваиваем класс активной кнопки
        $(tabFirst).removeClass('active');//убираем класс активной кнопки
        $(tabSecond).removeClass('active');//убираем класс активной кнопки
        $(tabFourth).removeClass('active');//убираем класс активной кнопки
        $(tabFifth).removeClass('active');//убираем класс активной кнопки
        iBlockWrap.updateSize();//обновляем параметры слайдера
        iBlockWrap.updateSlides();//обновляем параметры слайдера
        iBlockWrap.update();//обновляем параметры слайдера
        iBlockWrap.slideTo(2);//подгоняем слайд 3
    });
    $(tabFourth).on('click', function(){//при клике на кнопку 4
        $(this).addClass('active');//присваиваем класс активной кнопки
        $(tabFirst).removeClass('active');//убираем класс активной кнопки
        $(tabSecond).removeClass('active');//убираем класс активной кнопки
        $(tabThird).removeClass('active');//убираем класс активной кнопки
        $(tabFifth).removeClass('active');//убираем класс активной кнопки
        iBlockWrap.updateSize();//обновляем параметры слайдера
        iBlockWrap.updateSlides();//обновляем параметры слайдера
        iBlockWrap.update();//обновляем параметры слайдера
        iBlockWrap.slideTo(3);//подгоняем слайд 4
    });
    $(tabFifth).on('click', function(){//при клике на кнопку 5
        $(this).addClass('active');//присваиваем класс активной кнопки
        $(tabFirst).removeClass('active');//убираем класс активной кнопки
        $(tabSecond).removeClass('active');//убираем класс активной кнопки
        $(tabThird).removeClass('active');//убираем класс активной кнопки
        $(tabFourth).removeClass('active');//убираем класс активной кнопки
        iBlockWrap.updateSize();//обновляем параметры слайдера
        iBlockWrap.updateSlides();//обновляем параметры слайдера
        iBlockWrap.update();//обновляем параметры слайдера
        iBlockWrap.slideTo(4);//подгоняем слайд 5
    });
</script>
<script>
  var iBlockWrap = new Swiper(".iBlockWrap", {
      allowTouchMove: false,
      effect: "creative",
      creativeEffect: {
          prev: {
            shadow: true,
            translate: ["-120%", 0, -500],
          },
          next: {
            shadow: true,
            translate: ["120%", 0, -500],
          },
        },
    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, //отступ между слайдами
          }
    }
  });
</script>
<style>
/*Кнопки (табы) из примера, того что скидывал*/
.btn-tab-1 .tn-atom,
.btn-tab-2 .tn-atom,
.btn-tab-3 .tn-atom,
.btn-tab-4 .tn-atom,
.btn-tab-5 .tn-atom {
  text-align: left;
  cursor: pointer;
}

.btn-tab-1.active .tn-atom,
.btn-tab-2.active .tn-atom,
.btn-tab-3.active .tn-atom,
.btn-tab-4.active .tn-atom,
.btn-tab-5.active .tn-atom {
  color: #303bae !important;
}
</style>
Made on
Tilda