СЛАЙД 1
СЛАЙД 2
СЛАЙД 3
СЛАЙД 4
<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 = $('#rec356636678, #rec356639460, #rec356639595, #rec356639596'); //id слайдов
  var wrapper = '.convert-slider'; //класс шейпа - область слайдера, присвой шейпу класс convert-slider
  var box = $('.convert-slider .tn-atom').addClass('swiper-wrapper');

  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>
<script>
  var convertSwiper = new Swiper(".convert-slider", {

    spaceBetween: 40, //отступ между слайдами, значения: расстояние измеряется в px
    grabCursor: true, //курсор мыши, значения: false | true
    loop: true, //бесконечная прокрутка
    centeredSlides: true,//слайд в центре
    slidesPerView: 'auto',//кол-во слайдов на экране
    navigation: {
      nextEl: ".c-next", //добавь шейп, загрузи картинку стрелки фоном, присвой класс next
      prevEl: ".c-prev", //добавь шейп, загрузи картинку стрелки фоном, присвой класс prev
    },
    pagination: {
      el: ".swiper-pagination", //добавь шейп во всю ширину и высотой 20px, присвой класс swiper-pagination
      clickable: true,
    },
    breakpoints: {
      0: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      480: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      640: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      960: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      1200: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 40, //отступ между слайдами
      }
      //можно добавить еще варианты разрешений, по аналогии с теми, что выше, например
      //1400: {
      //slidesPerView: 4,
      //spaceBetween: 60,
      //grabCursor: false,
      //}
    }
  });
</script>
<style>
  .convert-slider .swiper-slide {
    max-width: 360px;/*ширина слайда*/
    height: 266px;/*высота слайда*/
    overflow: hidden;
    border-radius: 20px;/*скругление углов слайда*/
  }

  @media screen and (max-width: 1200px) {
    .convert-slider .swiper-slide {
      max-width: 300px;/*ширина слайда*/
      height: 222px;/*высота слайда*/
      border-radius: 20px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 960px) {
    .convert-slider .swiper-slide {
      max-width: 300px;/*ширина слайда*/
      height: 222px;/*высота слайда*/
      border-radius: 20px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 640px) {
    .convert-slider .swiper-slide {
      max-width: 300px;/*ширина слайда*/
      height: 222px;/*высота слайда*/
      border-radius: 20px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 480px) {
    .convert-slider .swiper-slide {
      max-width: 280px;/*ширина слайда*/
      height: 207px;/*высота слайда*/
      border-radius: 20px;/*скругдение углов слайда*/
    }
  }
/*ниже ничего не меняй*/
  .convert-slider.swiper-container {
    position: absolute;
    display: block;
    margin: 0 !important;
    overflow: hidden!important;
  }
  .swiper-wrapper {
    display: flex !important;
  }
  .c-next,
  .c-prev {
      cursor:pointer;
      outline:none;
  }
</style>
Какой-то текст слайда номер 2
Какой-то текст слайда номер 3
Какой-то текст слайда номер 4
Какой-то текст слайда номер 5
<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 = $('#rec355813177, #rec355813928, #rec355813953, #rec355814076, #rec355814100'); //id слайдов
  var wrapper = '.phone-slider'; //класс шейпа - область слайдера, присвой шейпу класс phone-slider
  var box = $('.phone-slider .tn-atom').addClass('swiper-wrapper');

  $(wrapper).addClass('swiper-container');
  $(slides).addClass('swiper-slide').appendTo(box);
</script>
<script>
  var iphoneSwiper = new Swiper(".phone-slider", {

    spaceBetween: 40, //отступ между слайдами, значения: расстояние измеряется в px
    grabCursor: true, //курсор мыши, значения: false | true
    loop: true, //бесконечная прокрутка
    effect: "coverflow",//эффект перелистывания
    centeredSlides: true,//слайд в центре
    coverflowEffect: {//настройки эффекта
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      translate: -500,
      slideShadows: true,
    },
    slidesPerView: 'auto',//кол-во слайдов на экране
    navigation: {
      nextEl: ".next", //добавь шейп, загрузи картинку стрелки фоном, присвой класс next
      prevEl: ".prev", //добавь шейп, загрузи картинку стрелки фоном, присвой класс prev
    },
    pagination: {
      el: ".swiper-pagination", //добавь шейп во всю ширину и высотой 20px, присвой класс swiper-pagination
      clickable: true,
    },
    breakpoints: {
      0: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      480: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      640: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      960: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 20, //отступ между слайдами
      },
      1200: { //разрешение дисплея, при котором сработает настройка

        spaceBetween: 40, //отступ между слайдами
      }
      //можно добавить еще варианты разрешений, по аналогии с теми, что выше, например
      //1400: {
      //slidesPerView: 4,
      //spaceBetween: 60,
      //grabCursor: false,
      //}
    }
  });
</script>
<style>
  .phone-slider .swiper-slide {
    max-width: 266px;/*ширина слайда*/
    height: 540px;/*высота слайда*/
    overflow: hidden;
    border-radius: 50px;/*скругление углов слайда*/
  }

  @media screen and (max-width: 1200px) {
    .phone-slider .swiper-slide {
      max-width: 266px;/*ширина слайда*/
      height: 540px;/*высота слайда*/
      border-radius: 50px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 960px) {
    .phone-slider .swiper-slide {
      max-width: 266px;/*ширина слайда*/
      height: 540px;/*высота слайда*/
      border-radius: 50px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 640px) {
    .phone-slider .swiper-slide {
      max-width: 240px;/*ширина слайда*/
      height: 540px;/*высота слайда*/
      border-radius: 50px;/*скругдение углов слайда*/
    }
  }

  @media screen and (max-width: 480px) {
    .phone-slider .swiper-slide {
      max-width: 240px;/*ширина слайда*/
      height: 540px;/*высота слайда*/
      border-radius: 50px;/*скругдение углов слайда*/
    }
  }
/*ниже ничего не меняй*/
  .phone-slider.swiper-container {
    position: absolute;
    display: block;
    margin: 0 !important;
  }

  .swiper-wrapper {
    display: flex !important;
  }
  .next,
  .prev {
      cursor:pointer;
      outline:none;
  }
</style>
Made on
Tilda