<!-- Стили плагина -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<!-- Библиотека плагина -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

<!-- Скрипт слайдера -->
<script>
  $(function() {
    var content = $('.uc-swiperfull');   // класс блоков с контентом
    $('.swiper-slider-full').addClass('swiper-container');
    var box = $('.swiper-slider-full .tn-atom').addClass('swiper-wrapper');
    $(content).addClass('swiper-slide').appendTo(box);
    var SwiperSliderFull = new Swiper(".swiper-slider-full", {
      loop: true,     // бесконечная прокрутка - true | прокрутка по кол-ву слайдов - false
      pagination: {
        el: ".swiper-full-pagination",
        clickable: true,
      },
      effect: 'coverflow',
      loopPreventsSliding: false,
      coverflowEffect: {
        rotate: 30,
        slideShadows: false,
      },
      navigation: {
        nextEl: ".full-next",
        prevEl: ".full-prev",
      },
      parallax: true,
      speed: 1200,
      keyboard: {
        enabled: true,
        onlyInViewport: false,
      },
      breakpoints: {
        0: {
          slidesPerView: 1,  // кол-во одновременно видимых слайдов на экране, при указанном разрешении экрана
          spaceBetween: 0,  // расстояние между слайдами при указанном разрешении дисплея
        },
        480: {
          slidesPerView: 1,  // кол-во одновременно видимых слайдов на экране, при указанном разрешении экрана
          spaceBetween: 0,  // расстояние между слайдами при указанном разрешении дисплея
        },
        640: {
          slidesPerView: 1,  // кол-во одновременно видимых слайдов на экране, при указанном разрешении экрана
          spaceBetween: 0,  // расстояние между слайдами при указанном разрешении дисплея
        },
        960: {
          slidesPerView: 1,  // кол-во одновременно видимых слайдов на экране, при указанном разрешении экрана
          spaceBetween: 0,  // расстояние между слайдами при указанном разрешении дисплея
        },
        1200: {
          slidesPerView: 1,  // кол-во одновременно видимых слайдов на экране, при указанном разрешении экрана
          spaceBetween: 0,  // расстояние между слайдами при указанном разрешении дисплея
        }
      }
    });
    // SBS анимация и обновление Lazy load при смене слайдов
    SwiperSliderFull.on('slideChange', function () {
      setTimeout(function () {
        if (t_lazyload_update) t_lazyload_update();
        $('.swiper-slide div[data-animate-sbs-event="blockintoview"]').removeClass('t-sbs-anim_started');
      }, 100);
      setTimeout(function () {
        $('.swiper-slide-active div[data-animate-sbs-event="blockintoview"]').addClass('t-sbs-anim_started');
      }, 300);
    });
    $('.swiper-pagination-bullet').click(function () {
      setTimeout(function () {
        if (t_lazyload_update) t_lazyload_update();
        $('.swiper-slide-active div[data-animate-sbs-event="blockintoview"]').addClass('t-sbs-anim_started');
      }, 300);
    });
  });

</script>

<style>

  :root {
    --bullet-bg:#f7e8d9; /*Цвет точки пагинации*/
    --bullet-active-bg:#000; /*Цвет АКТИВНОЙ точки пагинации*/
    --bullet-h:10px; /*Высота точки пагинации*/
    --bullet-w:10px; /*Ширина точки пагинации*/
    --bullet-opacity:1; /*Непрозрачность точки пагинации - сейчас 100% | .1 - 10% , .2 - 20% , .7 - 70%, допустимо .35 , .37 , так же 0.35 , 0,3 и т.д. */
  }

  /* CSS слайдера */
  .swiper-slider-full.swiper-container {
    position: absolute;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
  }
  
  .swiper-wrapper {
    transition-property: transform !important;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial) !important;
  }
  
  .full-next,
  .full-prev {
    cursor:pointer;
  }
  
  .swiper-full-pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-pagination-bullet {
    background: var(--bullet-bg);
    width:var(--bullet-w);
    height:var(--bullet-h);
    opacity: var(--bullet-opacity);
  }
  
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--bullet-active-bg);
  }
  
</style>