Demo
Usage
<div class="slide-navigation">
<div class="slide-navigation__content">
<div class="slide-navigation__tab-name">Middle slide</div>
<div class="slide-navigation__controls"><button class="btn-sm btn-primary " data-bs-target="#undefined" href="" title=""><svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.49012e-08 10C1.49012e-08 9.44772 0.447715 9 1 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H1C0.447715 11 1.49012e-08 10.5523 1.49012e-08 10Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.70711 4.29289C7.09763 4.68342 7.09763 5.31658 6.70711 5.70711L2.41421 10L6.70711 14.2929C7.09763 14.6834 7.09763 15.3166 6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289L5.29289 4.29289C5.68342 3.90237 6.31658 3.90237 6.70711 4.29289Z" fill="currentColor"></path>
</svg></button>
<div class="slide-navigation__counter"><span class="slide-navigation__current">2</span><span class="slide-navigation__separator">/</span><span class="slide-navigation__total">6</span></div><button class="btn-sm btn-primary " data-bs-target="#undefined" href="" title=""><svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 9.44772 0.447715 9 1 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H1C0.447715 11 0 10.5523 0 10Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 4.29289C9.68342 3.90237 10.3166 3.90237 10.7071 4.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L10.7071 15.7071C10.3166 16.0976 9.68342 16.0976 9.29289 15.7071C8.90237 15.3166 8.90237 14.6834 9.29289 14.2929L13.5858 10L9.29289 5.70711C8.90237 5.31658 8.90237 4.68342 9.29289 4.29289Z" fill="currentColor"></path>
</svg></button>
</div>
</div>
</div>
Options