Tengo un carrusel de búhos ngx en mi aplicación angular con las siguientes configuraciones:
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> He modificado las flechas de navegación predeterminadas en flechas personalizadas usando la tecla navText dentro de las opciones del carrusel de búhos. Lo que necesito es una forma de inyectar los números de diapositiva como (current slide)/(total slide count) entre estas flechas de texto de navegación del carrusel de búhos.
Traté de consultar la documentación, pero no tienen la opción de agregar los números de paso como 1/7 entre las flechas de navegación. Lo he implementado en una aplicación angular y me gustaría saber una solución adecuada para lograr el uso de mecanografiado.
Tengo una idea))) En primer lugar, establezca un contenedor html personalizado para nuestros navegadores (flechas):
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' };Cree este div después del carrusel y cree allí div con contador:
<div id="my_nav_container"> <div id="slides_counter"> ..your counter code here.. </div> </div>owlCarousel anteponga la flecha anterior y agregue la flecha siguiente al div de forma predeterminada y obtendrá lo que desea)))
E incluso mediante CSS puede establecer el orden de los elementos dentro de my_nav_container mediante propiedades flexibles:
#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}