在bxslider中resize时更新内容滑块的大小

我正在制作一个全屏内容的bx滑块，它是幻灯片内部文本和图像的混合，高度为100％但不知怎的，我不知道它在resize时面临的问题是什么。

我正在使用此代码： –

$(function() { var eleSlider = $('.main-slider'); var callSlider = eleSlider.bxSlider({ //pagerCustom: '.bx-pager', adaptiveHeight: true, adaptiveHeightSpeed: 1000, //mode: 'slide', //useCSS: false, infiniteLoop: false, hideControlOnEnd:true, easing: 'easeInOutExpo', //video: true, speed: 1000, autoHover:true, responsive:true, //preloadImages:all, pager:false, //controls:false, //auto:true, pause:3000, }); $(window).resize(function(){ callSlider.reloadSlider(); }).resize(); }); 

当我在没有reloadSlider()情况下调整屏幕大小时，它的宽度和高度采用了奇怪的形状，在应用reloadSlider() ，它会转到第一张幻灯片。

我希望宽度，高度和所有有用的组件在resize时更新，但保持当前幻灯片。

我设计了一个小提琴，但由于iframe没有显示问题，而在纯HTML中，它显示了高度不适应屏幕的问题。

http://jsfiddle.net/n0669x28/1/show/

Bx-slider有像adaptiveHeight: true, responsive:true参数adaptiveHeight: true, responsive:true ，在这种情况下有帮助吗？ 为什么会这样？

任何想法如何解决这个问题？

Answer 1

在重新resize事件期间获取当前幻灯片并将其设置为开始幻灯片。 还要创建设置对象以配置bxslider。

 var settings ={ //pagerCustom: '.bx-pager', adaptiveHeight: true, adaptiveHeightSpeed: 1000, //mode: 'slide', //useCSS: false, infiniteLoop: false, hideControlOnEnd:true, easing: 'easeInOutExpo', //video: true, speed: 1000, autoHover:true, responsive:true, //preloadImages:all, //pager:false, //controls:false, //auto:true, pause:3000, //nextSelector: '#slider-next', //prevSelector: '#slider-prev', }; var callSlider = $('.main-slider').bxSlider(settings); $(window).resize(function(){ settings.startSlide = callSlider.getCurrentSlide(); callSlider.reloadSlider(settings); });