<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>