Не могу найти карусель для сайта(HTML) с вынесенными отдельно либо с позиционированными сверху счетчиком и стрелками навигации
Не могу найти карусель для сайта(HTML) с вынесенными отдельно либо с позиционированными сверху счетчиком и стрелками навигации. 
Ответы (1 шт):
Автор решения: Krakanosh
→ Ссылка
Пример реализации на Swiper. Стрелки и счетчик вынесены за пределы слайдера. Дальше стилизуйте уже как вам надо.
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>