Add the slide number and total count in between the navigation arrows of the owl carousel

Question

Add the slide number and total count in between the navigation arrows of the owl carousel

In my Angular application, I am utilizing an ngx owl carousel with specific configurations set up as follows:

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 customized the navigation arrows in the owl carousel by utilizing the navText key within the options. Now, I am looking for a way to include the slide numbers as

(current slide)/(total slide count)

between these custom arrows.

Although I searched the documentation, there doesn't seem to be an option to add step numbers such as 1/7 between the navigation arrows. Can someone suggest a suitable TypeScript solution to achieve this in an Angular application?

javascript angular typescript owl-carousel

Answer 1

Answer №1

Let's start with a creative idea))) To begin, we will create a custom HTML container for our navigation 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'
};

After setting up the carousel, add this div and include a counter inside:

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

By default, owlCarousel places the previous arrow before and the next arrow after the div, giving you the desired result)))

You can further style the elements inside my_nav_container using CSS 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}

Answer 2

Let's start with a creative idea))) To begin, we will create a custom HTML container for our navigation 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'
};

After setting up the carousel, add this div and include a counter inside:

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

By default, owlCarousel places the previous arrow before and the next arrow after the div, giving you the desired result)))

You can further style the elements inside my_nav_container using CSS 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}

Add the slide number and total count in between the navigation arrows of the owl carousel

Answer №1

Similar questions

Apply a watermark specifically to fancybox for images in galleries, excluding non-gallery items

What is the best practice for updating the state of a web component in a manner that can be tracked by history with vaadin-router?

Adjust the button's width as the text changes to create a dynamic animation

Is there a way to simulate the BeforeInstallPromptEvent for testing in Jasmine/Angular?

Using Node.js and Express with MySQL to store documents (outcomes)

Create a roster of individuals who responded to a particular message

What is the process for rendering a page in node express from a route.post method?

jQuery menu animation not triggering until second click

AngularJS - ng-repeat: Warning: Repeated items found in the repeater and are not allowed. Repeater:

Leverage the power of JavaScript validation combined with jQuery

Translate the DateTime to the local time zone

A step-by-step guide on deleting an element within a div using jQuery

How come certain rectangles vanish when one rectangle completely fills the space?

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Is it possible to create Android apps using HTML and JavaScript?

Checking for any lint errors in all JavaScript files within the project package using JSHint

Utilizing Jquery in the Customer Portal feature within the Salesforce platform

Troubleshooting: The issue of importing Angular 2 service in @NgModule

How do I retype an interface from a dependency?

Adding a local image to Firebase Storage in Angular5 / Ionic3