Не могу найти карусель для сайта(HTML) с вынесенными отдельно либо с позиционированными сверху счетчиком и стрелками навигации

const swiper = new Swiper('.swiper', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

.swiper-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}
.swiper-button-prev,
.swiper-pagination,
.swiper-button-next {
  position: static !important;
}
.swiper {
  width: 600px;
  height: 300px;
}
.swiper-slide {
    opacity: 0 !important;
}
.swiper-slide-active {
    opacity: 1 !important;
}
.swiper-slide p {
  color: #000;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
<div class="swiper-nav">
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod?
                Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p>
        </div>
        <div class="swiper-slide">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod?
                Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p>
        </div>
        <div class="swiper-slide">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Unde consequuntur, ex itaque eos amet nobis perspiciatis aliquid quod?
                Dignissimos sed nesciunt non cumque, iusto itaque commodi a eos odio culpa.</p>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>