Owl caroussel - Add a numbered image counter in between the navigation buttons

Question

Owl caroussel - Add a numbered image counter in between the navigation buttons

Recently, I made some adjustments to the owl caroussel nav buttons "next" and "previous" by modifying lines 2966 and 2968 to resemble arrows.

To further enhance it, I now plan to include a div that will feature an image counter positioned between the navigation buttons.

For a better understanding of my objective, please refer to this image:

If you could assist me with identifying which specific line in owl.caroussel.js requires modification to accommodate an element between the nav buttons, I would greatly appreciate it. I attempted adding h1 tags for this purpose, but unfortunately, it was not successful.

Thank you in advance for your help and guidance.

javascript html css owl-carousel

Answer 1

Answer №1

If you want full control over your navigation, I suggest building your own and hiding the default owl navigation. You can then use the documented actions on this page:

By doing this, you have the freedom to design your navigation as you wish.

Here's a basic example, partially taken from the documentation with some modifications:

// initialize without navigation:

var owl = $('.owl-carousel');
owl.owlCarousel({
    nav: false,
});

// trigger go to next item on your own next navigation button:

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

// trigger go to the previous item:

$('.customPrevBtn').click(function() {
    owl.trigger('prev.owl.carousel', [300]);
})

Your HTML structure could resemble the following:

<div class="gallery">
    <div class="owl-carousel"></div>
    <div class="navigation">
        <span>prev</span>
        <span>1/42</span>
        <span>next</span>
    </div>
</div>

Answer 2

If you want full control over your navigation, I suggest building your own and hiding the default owl navigation. You can then use the documented actions on this page:

By doing this, you have the freedom to design your navigation as you wish.

Here's a basic example, partially taken from the documentation with some modifications:

// initialize without navigation:

var owl = $('.owl-carousel');
owl.owlCarousel({
    nav: false,
});

// trigger go to next item on your own next navigation button:

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})

// trigger go to the previous item:

$('.customPrevBtn').click(function() {
    owl.trigger('prev.owl.carousel', [300]);
})

Your HTML structure could resemble the following:

<div class="gallery">
    <div class="owl-carousel"></div>
    <div class="navigation">
        <span>prev</span>
        <span>1/42</span>
        <span>next</span>
    </div>
</div>

Owl caroussel - Add a numbered image counter in between the navigation buttons

Answer №1

Similar questions

Distance Calculator for Geolocation WatchPosition

Typescript inheritance results in an undefined value being returned

Prevent automatic jumping to input fields

The PHP page is not receiving the variable passed through AJAX

Preloading jQuery Images in Relation to the Present Document

Ways to display one element while concealing it when another is clicked

What is the process for inserting an SVG object into an HTML document?

Removing the id attribute in the innerHTML property of Angular 4

We were unable to load the resource because the server returned a 404 (Not Found) error. The EnterpriseMaster/BindNatureofAssignment feature is not functioning properly after being published

Problem with jQuery form button in dynamic table detecting rows after the first

Replicate the functionality of a mouse scrolling event

Is there a way to handle specific email format designs with PHP?

The automated test locator in Angular using Protractor is failing to function

Guide for receiving client messages on the server side (Node.js) with PubNub

Upgrade to iOS 8 and experience the new Full Screen Mode feature. When you tap on a text field for the first time, the onscreen keyboard will flash briefly

Angular UI-router allowing links to direct to different sections of the same domain but outside of the app

The JSON data rendered by Angular is causing disturbance

Is the Button Class failing to retrieve the entire length of the div element?

Top method for establishing a mysql connection in Express version 4

Prevent users from navigating back after logging in on a Reactjs application