Swiper bottom space fix

swiper-lazyload-image-fix.html

 <!-- begin Swiper slider-->
<div class="swiper-box swiper-container" id="discounts-carousel">
  <div class="swiper-box__wrapper swiper-wrapper">
    <div class="swiper-box__item swiper-slide">
      <div class="swiper-box__item-content"><a class="swiper-box__link" href="#"><img class="swiper-box__image swiper-lazy" data-src="img/content/swiper/home-1.jpg" alt="Описание" title="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="/><span class="swiper-box__prelaoder swiper-lazy-preloader swiper-lazy-preloader-white"></span></a>
      </div>
    </div>
    <div class="swiper-box__item swiper-slide">
      <div class="swiper-box__item-content"><a class="swiper-box__link" href="#"><img class="swiper-box__image swiper-lazy" data-src="img/content/swiper/home-2.jpg" alt="Описание" title="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="/><span class="swiper-box__prelaoder swiper-lazy-preloader swiper-lazy-preloader-white"></span></a>
      </div>
    </div>
  </div>
  <div class="swiper-box__pagination swiper-pagination">
  </div>
  <div class="swiper-box__prev-btn swiper-button-prev icon-left-dir">
  </div>
  <div class="swiper-box__next-btn swiper-button-next icon-right-dir-1">
  </div>
</div>
<!-- end Swiper slider-->

swiper-lazyload-image-fix.js

var discountsCarousel = new Swiper('#discounts-carousel', {
  preloadImages: false,
  lazy: true,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

});

swiper-lazyload-image-fix.scss

.swiper-box {
  &__image {
    &.swiper-lazy-loaded {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  &__link {
    display: flex;
  }
}

das