Drupal 7 CMS Flexslider API add a {Current slide} / {Total slide} pager / counter display via jQuery

Drupal 7 CMS Flexslider API add a {Current slide} / {Total slide} pager / counter display via jQuery

Today I'll show you how you can easily display a CURRENT / TOTAL count to your flexslider in Drupal 7 using the flexslider.module and some custom JavaScript.

Just use the following code and modify it to your needs before:

  1. function _flexslider_show_pager() {
  2.   (function($) {
  3.     jQuery('#flexslider-1').on('start', function(event) {
  4.       var $pager = $(this).find('.flex-sidebar-direction-nav-pager-webksde');
  5.       if ($pager.length <= 0) {
  6.         $pager = $('<div class="flex-sidebar-direction-nav-pager-webksde"><span class="pager-current"></span><span class="pager-separator">/</span><span class="pager-total"></span></div>');
  7.         $(this).find('ul.flex-sidebar-direction-nav').prepend($pager);
  8.       }
  9.       $flexslider = $(this).data('flexslider');
  10.       $pager.children('.pager-current').text($flexslider.currentSlide + 1);
  11.       $pager.children('.pager-total').text($flexslider.count);
  12.     });
  13.  
  14.     jQuery('#flexslider-1').on('after', function(event) {
  15.       var $pager = $(this).find('.flex-sidebar-direction-nav-pager-webksde');
  16.       if ($pager.length >= 0) {
  17.         $flexslider = $(this).data('flexslider');
  18.         $pager.children('.pager-current').text($flexslider.currentSlide + 1);
  19.         $pager.children('.pager-total').text($flexslider.count);
  20.       }
  21.     });
  22.   })(jQuery);
  23. }

Don't forget to call the function! :)

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen