What causes the active slide number to remain the same in Swiper JS pagination when using fractions?

I have been working on setting up an .image-slider__fraction block to display the active slide number out of the total number of slides. However, I am encountering an error in the JavaScript that says "Uncaught ReferenceError: myImageSLider is not defined". I am unsure of the reason behind this issue.

Check out the site here: Find the code on: https://jsfiddle.net/qav8z7f3/

Image reference: https://i.sstatic.net/dRH3i.jpg

 let mySliderAllSlides = document.querySelector('.image-slider__total');
    let mySliderCurrentSlide = document.querySelector('.image-slider__current');

    mySliderAllSlides.innerHTML = myImageSLider.slides.length;

    myImageSLider.on('slideChange',  function() {
        let currentSlide = ++myImageSLider.realIndex;
        mySliderCurrentSlide.innerHTML = currentSlide;
    });
<div class="image-slider__fraction">
                        <div class="image-slider__current">1</div>
                        <div class="image-slider__sepparator">/</div>
                        <div class="image-slider__total">1</div>
</div>

javascripthtmljquerycssswiper.js

Answer №1

To achieve this functionality, you can follow the steps outlined in this code snippet: https://jsfiddle.net/zoymLphf/

Utilize the swiper API methods to handle the task. Calculating the total number of slides can be a bit tricky, especially in loop mode. There might be a more refined solution available for this scenario.

const swiper = new Swiper('.image-slider', {
    // Optional parameters
    slidesPerView: 3,
    on: {
      init: function(sw) {
        $('.image-slider__total').text($('.swiper-slide:not(.swiper-slide-duplicate)').length)
        $('.image-slider__current').text(sw.realIndex + 1)
      },
      slideChange: function (sw) {
        $('.image-slider__current').text(sw.realIndex + 1)
      },
    },
    spaceBetween: 30,
    direction: 'horizontal',
    centeredSlides: true,
    loop: true,
    loopedSLides: 3,
    simulateTouch: true,
    grabCursor: true,
    speed: 800,
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar'
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 1000,
    }
});

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

Include a future date with a date extracted from a JSON response

I have retrieved a date from a JSON response. After confirming that the date is indeed a valid date type, I am having trouble setting it to a future date. The snippet of code below shows my attempt: $rootScope.until = response.data.data.dateReceived; //r ...

javascriptjsonangularjs

Masonry.js is working perfectly in Firefox, however, it is experiencing compatibility issues with Chrome and

Recently, I encountered a strange issue with Dessandro's Masonry.js library. It was working perfectly fine until it suddenly stopped functioning in Safari and Chrome (I haven't tested it on IE yet), while still working flawlessly in Firefox. Usua ...

javascriptcross-browsercoffeescriptjquery-masonry

Preventing the "Return to Top Button" from showing up right before the footer

Reviewing my code, I have the following snippet: $(function() { // store scroll to top button in a variable var b = $('#back-top'); // Initially hide scroll top button b.hide(); // FadeIn or FadeOut scroll to top button on scroll event ...

jquerybuttonscrollautoscroll

The key to highlighting the search terms in bold format

How can I highlight the search terms entered by users in the search box? I want all keywords in every search result to be bolded. For example, when a search term is entered and the results page displays all results with the typed term in bold within each ...

phpcsssql

Enhanced Custom Code Highlighting for Aptana Studio 3 with support for .less files

Looking to enhance syntax highlighting for .less files in Aptana Studio 3 but struggling to find a solution. XText only works with Eclipse, and the forums offer limited guidance. Has anyone successfully implemented custom syntax highlighting for .less fi ...

csssyntax-highlightingaptanalessxtext

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

javascriptjqueryhtmltabs

Optimized printing layout with Bootstrap

Having some trouble printing an invoice I created using HTML and Bootstrap CSS. The issue is that the content doesn't print in full width, even after changing the media from screen to all. Check out how it looks on the web: Here's how it appear ...

htmlcsstwitter-bootstrap

The ViewChild from NgbModalModule in @ng-bootstrap/ng-bootstrap for Angular 6 is causing the modal to return as

I have successfully integrated ng bootstrap into my project, specifically utilizing the modal module to display a contact form. The form includes input fields for email and message, as well as a submit button. You can find the ngbootstrap module I am using ...

javascriptangulartypescriptfrontendng-bootstrap

What are the steps to ensure my header spans the full width on both mobile and desktop platforms in an HTML email?

Hello, I am nearly finished with composing this email, but an issue has arisen on mobile where the header is not stretching to full width. My goal is to make the header image fill the entire width of the screen on a mobile device, but I keep encountering o ...

htmlcssmobileheaderwidth

Upon refreshing the page, nested React routes may fail to display

When I navigate to the main routes and their nested routes, everything works fine. However, I encounter an issue specifically with the nested routes like /register. When I try to refresh the page, it comes up blank with no errors in the console. The main r ...

javascriptreactjsexpresswebpackreact-router-dom

javascript strange behavior

I am facing an issue with my code that is attempting to display images based on their height. Strangely, the code seems to work fine when I test it with 2 images, but fails when trying with 3 or more. Check out the site: Upon clicking a menu button, the ...

javascriptcssposition

What benefits does NewRelic offer?

We are looking for a way to monitor events within our application and send the data to a monitoring server such as NewRelic. Our goal is to set up alerts based on this custom data. For instance, we would like to receive an alert if an event does not occur ...

javascriptnode.jsnewrelic

a callback may seem like it's not a function, but in reality, it is

This question might seem simple, but I'm struggling to grasp the concept of callbacks, especially in NodeJS. My issue arises when trying to retrieve data from MySQL, something that is usually straightforward in most programming languages: In my rout ...

javascriptnode.jstypescript

Switching out control with a loading image during an ajax request

Looking for help on replacing a drop-down list with a loading image while an ajax call is in progress. After the ajax call is complete, I want to restore the drop-down with all event handlers still active. Any examples or tips would be greatly appreciate ...

jqueryajaxactivity-indicator

Navigating within a React application using React Router 2.6.0 by triggering a redirection within a click

Currently, I am experiencing an issue while utilizing react-router for constructing a login system with firebase and react. The desired functionality involves redirecting the user to the home page upon successful authentication of their username and passw ...

javascriptreactjsreact-router

The assignment of object properties seems to be failing in the outcome produced by Mongoose

After running a mongoose find query and storing the result in an object, I attempted to add a total coin value to each object by using the exec operation. However, when I printed the object on the console, it seemed that the value was not being assigned an ...

javascriptnode.jsmongodbmongoose

Displaying empty values in the post via plupload data

I have encountered an issue where a JSON string that I am trying to post is not getting posted, despite being visible in an alert. The strange part is that when I manually create a JSONArray, it gets posted successfully. Below is the code snippet, I would ...

javascriptjqueryjquery-pluginsplupload

What steps can be taken to ensure that a WebSQL query does not return negative

Here's the code snippet I am currently using: function decrementCart(quantity, id){ db.transaction(function(tx){ tx.executeSql("UPDATE cart SET quantity=(quantity -1) WHERE id=?", [id]) ...

javascriptangularjsweb-sql

Tips for handling various mandatory fields for two different user roles within a unified userModel.ts file on a Next.js and MongoDB user registration API platform

Could you please review my code and provide any suggestions for improvement? I have two types of user roles, candidate and business, each with multiple unique fields. My goal is to consolidate all these fields into one userModel.ts file. import mongoose ...

javascripttypescriptmongodbnext.jsmodel

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css