Slider Pro Slide Count - PullRequest
Новая
       9

Slider Pro Slide Count

0 голосов
/ 16 сентября 2018

Используя slider-pro , у меня возникают проблемы с получением количества слайдов для количества слайдов внутри карусели.Я посмотрел на это решение , но мне не повезло.Мой код выглядит следующим образом: 

$(document).ready(function($) {
 $('.slider-pro').sliderPro();
});

 var slider = $( this ).data( 'sliderPro' );

 $(this).append('<div class="counter"><span class="active">'+ (parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');
 slider.on( 'gotoSlide', function( event ) {
 $(this).find('.counter .active').text(event.index + 1);
 });

Но я получаю консольную ошибку:

TypeError: slider is undefined, can't access property "getSelectedSlide" of it

Я не большой любитель jquery, поэтому яЯ не уверен, почему он выдаёт мне эту ошибку, когда на самом деле свойство getSelectedSlide определено в файле jquery.sliderPro.js .Возможно, я не называю это правильно или мне нужно привязать свойство к классу или идентификатору.Я не уверен.Я пробовал и то и другое, но, похоже, ничего не работает.

Большое спасибо!

К сожалению, я использую селектор классов для инициализации нескольких ползунков на одной странице с помощьюте же параметры.Я не хочу использовать идентификатор, потому что мне придется создавать уникальный идентификатор для каждого экземпляра слайдера, который мне не нужен и станет неуправляемым.Я также не могу динамически генерировать идентификатор для каждого слайдера.Вот пример страницы: BFMagazine

Прямо сейчас я должен жестко закодировать номер слайдера / сумму в каждом слайде, что не идеально.

Соответствующий Slider-Pro js используется: 

$(document).ready(function($) {

  $('.slider-pro').sliderPro({
    width: '100%',
    arrows: true,
    fadeArrows: false,
    buttons: false,
    fade: true,
    fadeDuration: 200,
    thumbnailPosition: 'bottom',
    thumbnailWidth: 75,
    thumbnailHeight: 75,
    autoplay: false,
    fullScreen: false,
    breakpoints: {
      480: {
        thumbnailWidth: 40,
        thumbnailHeight: 40
      }
    }
  });

  $.each('.slider-pro', function() {

      var slider = $('.slider-pro').data('sliderPro');

      $('.slider-pro').append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) +
    '</span>/' + slider.getTotalSlides() + '</div>');

      slider.on('gotoSlide', function(event) {
      $('.slider-pro').find('.counter .active').text(event.index + 1);
      });

    });

});

Я получаю сообщение об ошибке консоли: 

TypeError: cannot use 'in' operator to search for 'length' in '.slider-pro'

Я использую jquery-2.1.4.min.js

Любые предложения будут с благодарностью.

Большое спасибо!

1 Ответ

0 голосов
/ 16 сентября 2018

Это простая проблема, на самом деле в найденном вами коде отсутствуют некоторые другие детали, касающиеся его использования;этот код необходимо использовать внутри контекста объекта или обработчика события, поэтому this будет ссылаться на объект, но в вашем случае вы пытаетесь использовать его снаружи, поэтому для this нет контекста, поэтому мы не можем использовать его кактакие.

В любом случае, как вы уже сказали, вы новичок в jquery, это нормально;вам нужно вместо this использовать селектор css напрямую, если вы находитесь "снаружи", поэтому у вас есть 

 var slider = $('.slider-pro').data( 'sliderPro' );
 // here this is not ok as it is "outside"

 $('.slider-pro').append('<div class="counter"><span class="active">'+ (parseInt(slider.getSelectedSlide()) + 1) 
 +'</span>/'+slider.getTotalSlides()+'</div>');

 slider.on('gotoSlide', function( event ) {
   $(this).find('.counter .active').text(event.index + 1);
   // here this is ok as it is "inside"
 });

Обновление :

Вы были почти там, но вместо того, чтобы использовать этот каждый, который вам был необходим для использования этот каждый, разница между ними заключается в том, что второй специально используется для узлов Dom, и вы можете использовать this магия внутри, чтобы ссылаться на каждый элемент, фактически не давая им какого-либо явного свойства, такого как идентификаторы 

  $('.slider-pro').each(function(index, element) {

      //using $(element) instead of $(this) should work too

      $(this).sliderPro({
         //..options
      });              

      var slider = $(this).data('sliderPro');

      $(this).append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) +
    '</span>/' + slider.getTotalSlides() + '</div>');

      slider.on('gotoSlide', function(event) {
        $(this).find('.counter .active').text(event.index + 1);
        // finds only the .counter and .active inside the current slider divsnot touching .counter and .active of other slider divs
      });


    });

Краткое описание: $(selector).each(..) перебирает все узлы Dom, которые соответствуют селектору, и дает вамконтекст this, который всегда будет ссылаться на текущий элемент итерации, но только в рамках каждой функции. Например, если совпадающие элементы представляют собой набор <div> с, вы можете ссылаться на каждый <div> в отдельности

...