<div class="home-slider">
<div class="swiper-wrapper">
<div class="swiper-slide home-slider__slide">
<div class="home-slider__bg" data-swiper-parallax="20%" style="background-image: url(../../images/dist/slide-images/1.jpg);"></div>
<div class="home-slider__text">
<div class="container">
<div class="row align-items-end">
<div class="col-lg-7">
<h2 class="home-slider__title">
Регистрация бизнеса<br>
удаленно в соответствии<br>
с законодательством
</h2>
</div>
<div class="col-lg-5">
<div class="home-slider__text-r">
<p class="home-slider__descr">Поможем вам быстро и без лишних хлопот зарегистрировать вашу компанию в соответствии с законодательством</p>
<div class="home-slider__navigation">
<button class="btn">Оставить заявку</button>
<div class="home-slider__navigation-container">
<div class="home-slider__prev">
<svg width="49" height="49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 1C11.521 1 1 11.521 1 24.5S11.521 48 24.5 48 48 37.479 48 24.5 37.479 1 24.5 1Zm0-1C10.969 0 0 10.969 0 24.5S10.969 49 24.5 49 49 38.031 49 24.5 38.031 0 24.5 0Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m20.707 24 7.646 7.646-.707.707L19.293 24l8.353-8.354.707.707L20.707 24Z"/>
</svg>
</div>
<div class="home-slider__count">
<span class="current">01</span> / <span class="total"></span>
</div>
<div class="home-slider__next">
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 48C37.4787 48 48 37.4787 48 24.5C48 11.5213 37.4787 1 24.5 1C11.5213 1 1 11.5213 1 24.5C1 37.4787 11.5213 48 24.5 48ZM24.5 49C38.031 49 49 38.031 49 24.5C49 10.969 38.031 0 24.5 0C10.969 0 0 10.969 0 24.5C0 38.031 10.969 49 24.5 49Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2929 25L20.6464 17.3536L21.3535 16.6465L29.7071 25L21.3535 33.3536L20.6464 32.6465L28.2929 25Z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide home-slider__slide">
<div class="home-slider__bg" data-swiper-parallax="20%" style="background-image: url(../../images/dist/slide-images/1.jpg);"></div>
<div class="home-slider__text">
<div class="container">
<div class="row align-items-end">
<div class="col-lg-7">
<h2 class="home-slider__title">
Регистрация бизнеса<br>
удаленно в соответствии<br>
с законодательством
</h2>
</div>
<div class="col-lg-5">
<div class="home-slider__text-r">
<p class="home-slider__descr">Поможем вам быстро и без лишних хлопот зарегистрировать вашу компанию в соответствии с законодательством</p>
<div class="home-slider__navigation">
<button class="btn">Оставить заявку</button>
<div class="home-slider__navigation-container">
<div class="home-slider__prev">
<svg width="49" height="49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 1C11.521 1 1 11.521 1 24.5S11.521 48 24.5 48 48 37.479 48 24.5 37.479 1 24.5 1Zm0-1C10.969 0 0 10.969 0 24.5S10.969 49 24.5 49 49 38.031 49 24.5 38.031 0 24.5 0Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m20.707 24 7.646 7.646-.707.707L19.293 24l8.353-8.354.707.707L20.707 24Z"/>
</svg>
</div>
<div class="home-slider__count">
<span class="current">01</span> / <span class="total"></span>
</div>
<div class="home-slider__next">
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 48C37.4787 48 48 37.4787 48 24.5C48 11.5213 37.4787 1 24.5 1C11.5213 1 1 11.5213 1 24.5C1 37.4787 11.5213 48 24.5 48ZM24.5 49C38.031 49 49 38.031 49 24.5C49 10.969 38.031 0 24.5 0C10.969 0 0 10.969 0 24.5C0 38.031 10.969 49 24.5 49Z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2929 25L20.6464 17.3536L21.3535 16.6465L29.7071 25L21.3535 33.3536L20.6464 32.6465L28.2929 25Z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.home-slider {
height: 250px;
width: 600px;
border-radius: 12px;
overflow: hidden;
color: #000;
}
.home-slider__slide {
overflow: hidden;
}
.home-slider__bg {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
position: absolute;
}
.home-slider__navigation {
display: flex;
align-items: center;
gap: 24px;
}
document.addEventListener('DOMContentLoaded', () => {
const homeSlider = new Swiper('.home-slider', {
loop: true,
speed: 2400,
parallax: true,
navigation: {
nextEl: '.home-slider__next',
prevEl: '.home-slider__prev',
},
pagination: {
el: '.home-slider__count .total',
type: 'custom',
renderCustom: function (swiper, current, total) {
return `0${total}`
}
},
})
})