Search code examples
safaribxslider

BxSlider - wrong Slider-Viewport-Height in Safari 5


In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/

When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:

slider.reloadSlider({
    mode: 'horizontal',
    speed: 800,
    pause: 7000,
    infiniteLoop: false,
    adaptiveHeight: true,
    preloadImages: 'visible',
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    pager: false,
    controls: false,
    auto: true,
    onSliderLoad: function(){
      jQuery('.article-controls a').on('click', function(e){
        e.preventDefault();
        var goTo = jQuery(this).attr('data-slide-index');
        slider.goToSlide(goTo);
      });   
    }
});

I use jQuery(window).load(), to be sure the slider is fully loaded.


Solution

  • I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:

    setTimeout(function(){  
      var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
      jQuery('.bx-viewport').css('height', sliderHeight);
    }, 300);