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

Question

我正在制作一个全屏内容 bx-slider，它是幻灯片中文本和图像的混合体，高度为 100%，但不知何故我不知道它在调整大小时面临的问题是什么。

我正在使用这个代码：-

$(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() 时，它会转到第一张幻灯片..

我希望在调整大小时更新宽度、高度和所有有用的组件，但保留在当前幻灯片上。

我设计了一个 fiddle 但由于 iframe 而没有显示问题，而在纯 html 它显示了高度未调整到屏幕的问题。

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

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

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

Answer 1

在调整大小事件期间获取当前幻灯片并将其设置为起始幻灯片。同时创建设置对象来配置 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);

});

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

Update size of content slider on resize in bxslider

javascript

jquery

resize

bxslider