Как решить проблему slider.reloadSlider is not a function?

Question

[Сергей Кравченко]

Делаю переключение между слайдерами, получаю ошибку slider.reloadSlider is not a function.

с кодом можно ознакомится тут jsfiddle.net/Vinnica/G8Laq/367

HTML

<div class="slide color-1">
  <ul class='bsxlsider-1'> 
    <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
     <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
     <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
  </ul>
 </div>
<div class="slide color-2" style='display:none'>
  <ul class='bsxlsider-2'> 
    <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
     <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
     <li><img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/4d/96376bbf681ac4d_516x517.jpg" alt=""></li>
  </ul>
 </div>

 <ul class="line-color-slide">
   <li>
   <label>
     <input type="radio" name="color" checked value="color-1" data-number="1">
     <img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/8d/cc312728d06cd8d_50x50.jpg" alt="">
     </label>
    </li>
<li>
 <label>
     <input  type="radio" name="color" value="color-2" data-number="2">
     <img src="http://touchtop.alintond.bget.ru/wp-content/cache/thumb/c6/bf1fdaf2d668fc6_50x50.png" alt="">
     </label>
    </li>
</ul>
 <label>

и скрипт

$(".bsxlsider-1").bxSlider({controls: false});
$('input[name="color"]').change(function () {        
        var color = $(this).val();
        var num = $(this).attr('data-number');
        var slider = $('.bsxlsider-' + num).bxSlider({controls: false});
        $('.slide').hide();
        $('.slide.' + color).show('slow');        
        slider.reloadSlider({controls: false});
    });

Суть получается в том что у нас есть две радио кнопки, и при переключение между ними должен показывать или один слайдер или другой. На словах то все просто, а вот на деле не получается перезагрузить слайдер который первоначально скрыт, выводит slider.reloadSlider is not a function.

Answer 1

[0xD34F]

Метод reloadSlider находится не в объекте jquery, а в привязанных к элементу данных, замените slider = $('.bsxlsider-' + num); на slider = $('.bsxlsider-' + num).data('bxSlider');.