Why is my line of code not working , even though the function is firing inside bxslider.

Why is my line of code not working , even though the function is firing inside bxslider.

iam just using bxslider and came across a funny fug MY PAGE  . the BUG can be seen in discussion on that thread.

my jQuery initialization code is as follows:


  1. $(window).on('load' , function(){

  3. var bxslider = $('.projects .bx-slider').bxSlider({
  4.  mode: 'vertical',
  5.  minSlides: 3,
  6.  slideWidth:304,
  7.  slideMargin: 8,
  8.  onSlideAfter: function(elem , old , newi){
  9.   /*var idx = elem.index(),
  10.   src = $('.bx-slider li').eq(idx).find('img').attr('src');
  11.   console.log(elem.index());
  12.   $('.active-project-img img').attr('src' , src);*/
  13.  },
  14.  onSliderLoad: function(){
  15.   // alert('yel');
  16.   console.log('loaded');
  17.              $(".projects .bx-slider").css("visibility", "visible");
  18.          }
  19.   
  20. });


  23. $(window).on('resize' , function(){

  25. if($(window).width() < 992 ) {
  26. bxslider.reloadSlider({
  27.    mode: 'horizontal',
  28.    minSlides: 3,
  29.    maxSlides:4,
  30.    slideWidth:304,
  31.    slideMargin: 8,
  32.    onSlideAfter: function(elem , old , newi){
  33.     /*var idx = elem.index(),
  34.     src = $('.bx-slider li').eq(idx).find('img').attr('src');
  35.     console.log(elem.index());
  36.     $('.active-project-img img').attr('src' , src);*/
  37.    }
  38. });

  40. } else {
  41. bxslider.reloadSlider({
  42.    mode: 'vertical',
  43.    minSlides: 3,
  44.    slideWidth:304,
  45.    slideMargin: 8,
  46.    onSlideAfter: function(elem , old , newi){
  47.     /*var idx = elem.index(),
  48.     src = $('.bx-slider li').eq(idx).find('img').attr('src');
  49.     console.log(elem.index());
  50.     $('.active-project-img img').attr('src' , src);*/
  51.    }
  52. });

  54. }

  56. dynamicHeight();

  58. /* To give height to main image container */

  61. }).trigger('resize');

  63. });

The code pertaining to this BUG is here:

  1. var bxslider = $('.projects .bx-slider').bxSlider({
  2.  mode: 'vertical',
  3.  minSlides: 3,
  4.  slideWidth:304,
  5.  slideMargin: 8,
  6.  onSlideAfter: function(elem , old , newi){
  7.   /*var idx = elem.index(),
  8.   src = $('.bx-slider li').eq(idx).find('img').attr('src');
  9.   console.log(elem.index());
  10.   $('.active-project-img img').attr('src' , src);*/
  11.  },
  12.  onSliderLoad: function(){
  13.   // alert('yel');
  14.   console.log('loaded');
  15.              $(".projects .bx-slider").css("visibility", "visible");
  16.          }
  17.   
  18. });
ok , so now i have hidden.bx-slider in the css using visibility:hidden , and when the slider images are done loading , the onSliderLoad function is supposed to fire and IT DOES !! .. but this line , inside the function :

  1.              $(".projects .bx-slider").css("visibility", "visible");
has no effect what so ever , now if i go and post the line in the the console and hit enter IT WORKS !! . but why is that line of code not working issue the function and also how do i solve this issue of bxslider loading infinity ! ?