слайдер с помощью библиотеки swiper

Делаю на сайте блок логотипов партнеров. Установив библиотеку swiper через npm импортирован объект в JS. Слайдер отображается на сайте, при клике мышки есть движения влево и вправо. Но кнопки стрелок не отображаются и слайдер не работает как нужно (при клике не переворачивается по 1 логотипу). Помогите сделать правильно.

HTML
    <div class="main__slider swiper-container">
                <div class="main__slider-wrapper swiper-wrapper">
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part1.png" alt="Partner 1">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part2.png" alt="Partner 2">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part3.png" alt="Partner 3">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part4.png" alt="Partner 4">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part5.png" alt="Partner 5">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part6.png" alt="Partner 6">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part7.png" alt="Partner 7">
                        </div>
                    </div>
                    <div class="main__slider-item swiper-slide">
                        <div class="main__slider-img">
                            <img src="./img/part8.png" alt="Partner 8">
                        </div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
CSS
.swiper-wrapper {
        display: flex;
        gap: 65px;
        align-items: center;
     }
     
     .swiper-slide {
        min-width: 0;
     }
     
     .swiper-button-prev,
     .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    background-color: transparent;
    border: none;
    outline: none;
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

JS
import Swiper, { Navigation } from 'swiper';
Swiper.use([Navigation]);

const swiper = new Swiper('.main__slider', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});