<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}`
			}
		},
	})
})

External CSS

  1. https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js