Incorporate Current and Total Slide Counters into Your Bootstrap 5 Carousel

How can I incorporate slide numbering into this Bootstrap 5 carousel example? I want to display the current slide number and the total number of slides in the carousel. The slide counters can be found in the carousel-pager div, where pager-current represents the current slide number and pager-total represents the total number of slides.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
        </div>
    </div>
    <div class="carousel-pager">
        <div class="pager-current">00</div>
        <div class="pager-total">00</div>
    </div>
</div>
javascriptbootstrap-5

Answer №1

Instructions to set up:

let images = [].slice.call(document.getElementsByClassName('container')[0].getElementsByTagName('*'), 0);

document.getElementsByClassName('total')[0].innerHTML = images.length;

// Set up a global variable
let currentImage = 1;

Make sure to add the following code to anything that changes the current image, such as a button click or a timer:

document.getElementsByClassName('pager-current')[0].innerHTML = (++currentImage) % images.length;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine if a directory is empty using Node.js?

Quite a while back, I submitted a question related to PHP. Now I'm facing a similar situation with Node.js where the code below appears to be sluggish when used in a loop - is there a way to achieve this using only vanilla JavaScript in pure Node.js w ...

javascriptnode.jsdirectorycdnfs

Having trouble choosing an option from the dropdown menu in bootstrap

I'm experiencing an issue with a bootstrap dropdown that I created. I am unable to select an item from it. The code is shown below: var aos = ''; $('.dropdown-item').click(function(event) { event.preventDefault(); // Prevents ...

javascriptbootstrap-4

Unable to receive a response in React-Native after sending a post request

My current challenge involves sending a response back after successfully making a post request in react-native. Unfortunately, the response is not arriving as expected. router.route("/addUser").post((req, res) => { let name= req.body.name; connection ...

javascriptnode.jsreact-nativeexpress

Using the npm timepicker in Laravel 5.8 with precision and efficiency

Looking for some guidance here as a newcomer to installing packages in Laravel. I'm currently working on implementing the timepicker feature from . In order to do this, I've already executed the command npm i jquery-timepicker. However, I seem t ...

javascriptlaravel-5npmtimepicker

Innovative Inter-Browser Link with a Distinct Shape

I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows: On the left ...

javascriptjqueryhtmlcssimage

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Function exhibiting varying behavior based on the form from which it is called

Currently, I'm utilizing AJAX to execute a server call, and I've noticed that the behavior of my function varies depending on its origin. Below is an excerpt of the code that's causing confusion: <html> <body> <script> ...

javascriptphpjqueryhtmlajax

Tips for inserting an element with a background color into an email using variables

I have encountered an issue while trying to send an email that includes an element from my component. The element is passed from Angular to C# and then sent to the customer. Here is the element: https://i.sstatic.net/2ky1b.png Everything looks good in ...

javascripthtmlcssangular

What is the best way to utilize TypeScript module augmentation with material-ui components?

I have gone through the answers provided in this source and also here in this link, but it appears that they are outdated. I attempted to enhance the type definition for the button component in various ways, including a separate typings file (.d.ts) as we ...

javascriptreactjstypescriptmaterial-ui

Concealing a field when the PHP post is devoid of content

On page1.php, there is a form that, upon submission, redirects to page2.php where the selected information is summarized. The code snippet below on page2.php retrieves this information. I am attempting to dynamically hide certain rows if the PHP post is e ...

javascriptphphtmlforms

An onClick event is triggered only after being clicked twice

It seems that the onClick event is not firing on the first click, but only works when clicked twice. The action this.props.PostLike(id) gets triggered with a delay of one click. How can I ensure it works correctly with just one click? The heart state togg ...

javascriptreactjsredux

Guide to changing the background color of material ui drawer component using styled-components

Issue with Styling Material Ui Drawer Using Styled Components In my application, I am utilizing a Material ui drawer in conjunction with Styled components. Although I have successfully styled several simple Material ui components using Styled components a ...

javascriptreactjsmaterial-uistyled-components

How can we determine the total number of mandatory fields in an AngularJS form?

Can you explain how to calculate the number of required fields in a form using AngularJS? In my form, there are two required fields (email and select view). I want to display the count on my page - showing 2 if email is filled, 1 if only email is filled, a ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

Something went wrong with @wdio/runner: unable to establish session

After successfully developing cucumber tests that passed and tested some URLs with Chrome, I encountered errors when uploading to the pipeline despite the tests succeeding. Webdriver generated the following errors: INFO webdriver: DATA { 57[0-0] capabili ...

javascriptselenium-webdriverselenium-chromedrivercucumberwebdriver-io

Using Javascript Regular Expressions to validate that the first number in an amount is non-zero

Need a solution to only accept numbers that do not start with zero, but can contain zeros after the first digit. Currently using var.replace(/[^1-9]/g, ''); which prevents input of 0 altogether. Examples of valid inputs: 10 9990 Examples of in ...

javascriptregex

Retrieving live information from an API in order to populate a specific route

Utilizing the contents of two crucial files to extract data from separate APIs, here is my simplified example: poloniex.js const Poloniex = require('poloniex-api-node') const poloniex = new Poloniex() async function obtainExchangeData() { po ...

javascriptnode.jsccxt

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

I am currently in the process of updating my Vue 2 application to Vue 3 and I have been exploring how to work with computed properties using the Composition API in Vue 3. One particular challenge I am facing is migrating a Vue 2 computed property that pro ...

javascriptvue.jsvuejs2vuejs3

When using Observables in AngularFire2, the $ref property does not get captured

Recently, I started working with AngularFire2 (version 4.0.0-rc.1) and encountered a challenge that has me stuck: getWishlist$(): FirebaseListObservable<{}> { return <FirebaseListObservable<{}>>this.store.select(getFirebaseUID) ...

javascriptangularfirebase-realtime-databaserxjsangularfire2

Issue with Bootstrap 5 dropdown navigation menu on ASP.NET Core MVC Razor layout page

I'm currently working on a project using asp.net core mvc. In my index page, I have a dropdown navigation menu that was functioning perfectly. However, when I attempted to convert the index page into a layout page, the dropdown stopped working. It onl ...

drop-down-menuasp.net-core-mvcbootstrap-5

The Protractor actions().mouseMove function does not seem to function properly in Firefox and IE, although it works perfectly in Chrome

I've encountered an issue with the mouseMove command while using the actions class. The error occurs specifically when running the script on Firefox and IE, but works fine on Chrome. Below is the code snippet I attempted: browser.get("https://cherch ...

javascriptseleniumprotractorbrowser-automation