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