4

I am trying to show the actual number / total number of slides shown, in a custom carousel script for a wpbakery widget in wordpress. The original code is using some flickity options, and I am using a code found on codepen for that purpose.

Here is the js I adapted:

flexibleCarouselNumber: function(){
            var $element = $('.grve-flexible-advanced-carousel');
            $element.each = function(){
                var $carousel = $('.grve-carousel-wrapper').flickity();
                var $carouselStatus = $('.carousel-status');
                var flkty = $carousel.data('flickity');
                                
            
            function updateStatus() {
                var cellNumber = flkty.selectedIndex + 1;
                $carouselStatus.text( cellNumber + '/' + flkty.slides.length );
              }
            
            $carousel.on( 'change.flickity', updateStatus );
            }

        }

and this is the html markup:

<div class="grve-element grve-carousel grve-flexible-carousel carousel-status">
<div class="grve-carousel-wrapper">
    <p class="carousel-status"></p>
        <div class="carousel-navigation">
            <div class="grve-carousel-buttons">
                <div class="grve-carousel-prev"></div>
                <div class="grve-carousel-next"></div>
            </div>
        </div>

    <div data-items="2" data-items-tablet-landscape="2" data-items-tablet-portrait="3" data-items-mobile="1" data-pagination="yes" data-slider-autoheight="" data-slider-autoplay="no" data-slider-loop="no" data-stage-padding="0" class="grve-carousel-element grve-flexible-advanced-carousel flickity flickity-enabled is-draggable" tabindex="0" style="visibility: visible;">
    
        <div class="flickity-viewport">
            <div class="flickity-slider">
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
              <div class="grve-element grve-text"><p>This is a paragraph</p></div>
            </div>
        </div> 
        <ol class="flickity-page-dots">
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ol>
    </div>


</div>

but in the

output, it's empty.

tonywd
  • 41
  • 1

1 Answers1

0

Can you update the index like this?

$carousel.on( 'change.flickity', function( event, index ) {
    console.log( 'Slide changed to ' + index )
});

I think this might be the issue

Esterified
  • 63
  • 1
  • 2
  • 11