<style>
[class*=uc-slide]  .t396__artboard {
    background-color: transparent!important;
}

/*Настраиваем стиль кнопок влево - вправо*/
.swiper-button-next, .swiper-button-prev{
    color: var(--swiper-navigation-color,#fff);
    background-color:#ddb9e99c;
    border: 0px solid white;
    border-radius: 100%;
    width: 0px;
    height: 0px;
    opacity: 0!important;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
    background-color: #ffffffb8;
    color: #ddb9e9;
}
.swiper-button-next::after, .swiper-button-prev::after{
    font-size: 1.2em;
}
/*Настраиваем стиль для буллетов*/
.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color,#779124);
}
.swiper-pagination-bullet{width:0px;height:0px;}

/*Настраиваем габариты слайдера для экранов: компьютер, планшет + скругляем углы, т.к. дизайн слайда у меня круглый border-radius: 26px;*/
.mySwiper1{
	max-width:934px;
	width:100%;
	height:100%;
	max-height:418px;
        border-radius: 0;
}
swiper-slide {
    opacity: 0.5;
}
.swiper-slide-active {
    opacity: 1;
}

/*Настраиваем габариты слайдера для экрана: телефон*/
@media (max-width:480px){
.mySwiper1{
	max-width:320px;
	width:100%;
	max-height:566px;
	height:100%
}
}
</style>

<script>
$(function(){
    $(".uc-slide1").appendTo(".mySwiper1 .swiper-wrapper .slide1");
$(".uc-slide2").attr('data-swiper-parallax-opacity','0').appendTo(".mySwiper1 .swiper-wrapper .slide2");
$(".uc-slide3").attr('data-swiper-parallax-opacity','0').appendTo(".mySwiper1 .swiper-wrapper .slide3");
$(".uc-slide4").attr('data-swiper-parallax-opacity','0').appendTo(".mySwiper1 .swiper-wrapper .slide4");
$(".uc-slide5").attr('data-swiper-parallax-opacity','0').appendTo(".mySwiper1 .swiper-wrapper .slide5");

 var swiper = new Swiper(".mySwiper1", {
        parallax:true,
         spaceBetween: 50,
         speed: 1000,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
      
      swiper.on('slideChange', function () {
           $('[class*=step] .tn-atom').removeClass('active-step');
          let num = swiper.activeIndex + 1;
          switch (num) {
        case 1:
            document.documentElement.style.setProperty('--pseudo-width', '0%');
            $('.step1 .tn-atom').addClass('active-step');

        break;
        case 2:
            document.documentElement.style.setProperty('--pseudo-width', '25%');
            $('.step1 .tn-atom').addClass('active-step');
             $('.step2 .tn-atom').addClass('active-step');

        break;
        case 3:
            document.documentElement.style.setProperty('--pseudo-width', '50%');
            $('.step3 .tn-atom').addClass('active-step');
             $('.step2 .tn-atom').addClass('active-step');
              $('.step1 .tn-atom').addClass('active-step');

        break;
        case 4:
            document.documentElement.style.setProperty('--pseudo-width', '75%');
            $('.step4 .tn-atom').addClass('active-step');
             $('.step3 .tn-atom').addClass('active-step');
              $('.step2 .tn-atom').addClass('active-step');
               $('.step1 .tn-atom').addClass('active-step');

        break;
        case 5:
            document.documentElement.style.setProperty('--pseudo-width', '100%');
            $('.step5 .tn-atom').addClass('active-step');
            $('.step4 .tn-atom').addClass('active-step');
            $('.step3 .tn-atom').addClass('active-step');
            $('.step2 .tn-atom').addClass('active-step');
            $('.step1 .tn-atom').addClass('active-step');

        break;
        default:
            document.documentElement.style.setProperty('--pseudo-width', '0%');
            $('.step1 .tn-atom').addClass('active-step');

        break;
      }
        });
})
</script>

<style>
    :root {
       --pseudo-width: 0%; 
    }
    
    [class*=step] {
        cursor: pointer;
        user-select: none;
        z-index: 555 !important;
    }
    
    .active-step {
        background-color: #3049d7!important;
    }
    
    .progress .tn-atom:after {
        content: '';
        background-color: #3049d7;
        width: var(--pseudo-width);
        height: 100%;
        position: absolute;
        transition: width 0.5s ease;
    }
    
</style>

<script>
$(function(){

    $('.step1 .tn-atom').addClass('active-step');

  $('[class*="step"]').on('click', function() {
      $('[class*="step"]').removeClass('active-step')
    var allClasses = $(this).attr('class').split(' ');
    var stepClasses = allClasses.filter(function(className) {
      return className.indexOf('step') === 0;
    });
    if (stepClasses.length > 0) {
      var lastDigit = parseInt(stepClasses[stepClasses.length - 1].match(/\d+/));
      console.log('Последняя цифра: ', lastDigit);
      switch (lastDigit) {
        case 1:
            document.documentElement.style.setProperty('--pseudo-width', '0%');
            $('.step1 .tn-atom').addClass('active-step');
            $('.swiper-pagination-bullet:eq(0)').click()
        break;
        case 2:
            document.documentElement.style.setProperty('--pseudo-width', '25%');
            $('.step1 .tn-atom').addClass('active-step');
             $('.step2 .tn-atom').addClass('active-step');
             $('.swiper-pagination-bullet:eq(1)').click()
        break;
        case 3:
            document.documentElement.style.setProperty('--pseudo-width', '50%');
            $('.step3 .tn-atom').addClass('active-step');
             $('.step2 .tn-atom').addClass('active-step');
              $('.step1 .tn-atom').addClass('active-step');
              $('.swiper-pagination-bullet:eq(2)').click()
        break;
        case 4:
            document.documentElement.style.setProperty('--pseudo-width', '75%');
            $('.step4 .tn-atom').addClass('active-step');
             $('.step3 .tn-atom').addClass('active-step');
              $('.step2 .tn-atom').addClass('active-step');
               $('.step1 .tn-atom').addClass('active-step');
               $('.swiper-pagination-bullet:eq(3)').click()
        break;
        case 5:
            document.documentElement.style.setProperty('--pseudo-width', '100%');
            $('.step5 .tn-atom').addClass('active-step');
            $('.step4 .tn-atom').addClass('active-step');
            $('.step3 .tn-atom').addClass('active-step');
            $('.step2 .tn-atom').addClass('active-step');
            $('.step1 .tn-atom').addClass('active-step');
            $('.swiper-pagination-bullet:eq(4)').click()
        break;
        default:
            document.documentElement.style.setProperty('--pseudo-width', '0%');
            $('.step1 .tn-atom').addClass('active-step');
            $('.swiper-pagination-bullet:eq(0)').click()
        break;
      }
    }
  });
})
</script>