Swiper слайдер. Слайдер выходит за пределы страницы, из-за чего снизу страницы появляется scroll

Делала по документации Swiper слайдер. https://swiperjs.com/get-started - ссылка на документацию

index.html

<div class="image-slider swiper-container">
            <div class="image-slider__wrapper swiper-wrapper">               
                 <div class="image-slider__slide swiper-slide">
                     <div class="image-slider__image">
                         <div class="image-slider__text">
                             <h6 class="text-top">PLAN YOUR LIFE</h6>
                             <h1 class="title">Increase your <span class="title-span">productivity</span></h1>
                             <p class="text-bottom">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu <br>atqui laudem an, insolens gubergren similique est cu. Et vel modus<br> congue vituperata.</p>
                         </div>
                         <img src="assets/img/hero.svg" alt="img">
                     </div>
                 </div>
                 <div class="image-slider__slide swiper-slide">
                     <div class="image-slider__image">
                         <img src="assets/img/hero.svg" alt="img">
                     </div>
                 </div>
                 <div class="image-slider__slide swiper-slide">
                     <div class="image-slider__image">
                         <img src="assets/img/hero.svg" alt="img">
                     </div>
                 </div>
             </div>    
             <div class="swiper-pagination paginat"></div>
        </div>

style.css

.image-slider__image{
display: flex;
justify-content: center;
}
.image-slider__image img{
    width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 30px;
}
.image-slider__text{
    position: absolute;
    text-align: center;
    top:20%;
}

script.js

new Swiper('.image-slider',{
navigation:{
    nextEl:'.swiper-button-next',
    prevEl:'.swiper-button-prev'
},

pagination:{
    el:'.swiper-pagination',
    clickable:true,
},

rendeBullet: function(index, className){
    return '<span class="' + className + '">' + (index+1) + '</span>';
}
});

Слайдер работает, картинки переключаются, только он выходит за пределы из-за чего внизу страницы появляется scroll

Что с этим можно сделать? Как исправить эту ошибку?