Insert slide number and total count between navigation arrows of owl carousel

Question

I have an ngx owl carousel in my angular application with configurations as below:

const carouselOptions = {
 items: 1,
 dots: false,
 nav: true,
 navText: ["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"]
};

<owl-carousel [options]="carouselOptions" [carouselClasses]="['owl-theme','row','sliding']">
 <div class="item" *ngFor="let imgUrl of imageList; let i=index">
     <img src={{imgUrl}} alt="image slide" />
 </div>
</owl-carousel>

I have altered the default navigation arrows into custom arrows by using the navText key inside the owl carousel options. What I need is a way to inject the slide numbers as (current slide)/(total slide count) in between this navText arrows of owl carousel.

I tried to check the documentation but they dont have the option to add the step numbers as 1/7 between the navigation arrows. I have implemented it in a angular application and would like to know a suitable solution to achieve using typescript?

Answer 1

Have one idea))) First of all let set custom html container for our navs (arrows):

const carouselOptions = {
 items: 1,
 dots: false,
 nav: true,
 navText: ["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
navContainer: '#my_nav_container'
};

Create this div after carousel and create there div with counter:

<div id="my_nav_container">
 <div id="slides_counter">
  ..your counter code here..
 </div>
</div>

owlCarousel prepend prev arrow and append next arrow to the div by default and you get what you want)))

And even by CSS you can set order for elements inside my_nav_container by flex properties:

#my_nav_container {display:flex; justify-content:center;}
#my_nav_container .prev-slide {order:1}
#my_nav_container #slides_counter {order:2}
#my_nav_container .next-slide {order:3}