Question

41

How to make Swiper JS display faction pagination and progress bar at the same time?

rated 0 times [ 42] [ 1] / answers: 1 / hits: 5163 / 3 Years ago, tue, july 13, 2021, 12:00:00

How to make it so that the progress bar with the progress line and the numeric display of the active slide from the total number of slides are displayed simultaneously?

Since by default the simultaneous operation of the progress bar and pagination with a fraction is impossible, I added "type: 'progressbar'" in the "pagination" properties, and for the numeric display of slides I made an .image-slider__fraction block in which I placed all the elements.
Then I wrote java script code that I found on the Internet, but I get an error "Uncaught ReferenceError: myImageSLider is not defined". Why?

Site ilyin1ib.beget.tech

Code https://jsfiddle.net/qav8z7f3/

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daquanmilesw

Add To Favorites

Follow

Total Points: 57

Total Questions: 102

Total Answers: 110

Location: Wallis and Futuna

Member since Sat, Aug 6, 2022

2 Years ago

daquanmilesw questions

1 array.filter is returning entire object instead of just one value

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How can I do top level await

Sat, Jul 10, 21, 00:00, 3 Years ago

1 Svelte reactivity not triggering when variable changed in a function

Thu, Sep 17, 20, 00:00, 4 Years ago

1 Importing node modules in a WordPress plugin

Wed, Jun 24, 20, 00:00, 4 Years ago

1 Material UI global css variables

Sun, Dec 8, 19, 00:00, 5 Years ago

View All

answered 3 Years ago kaley · Accepted Answer

use slideChange event. The script does not give the actual number of items because you used the loop inside the slider. That's why I found the value of the items before creating the slider script.

var totalSlide = $('.image-slider .swiper-slide').length;

const swiper = new Swiper('.image-slider', {

  // Optional parameters

  slidesPerView: 3,

  spaceBetween: 30,

  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,

  }

});

//var count = $('.image-slider .image-slider__slide').length;





swiper.on('slideChange', function() {

  var fragment = document.querySelector('.image-slider__current');

  var current = swiper.realIndex + 1;

  if (current > totalSlide)

    current = 1;

  var idx = current < 10 ? ("0" + current) : current;

  var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;

  fragment.innerHTML = (idx + '/' + tdx);

});

demo in jsfiddle