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

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

我设计了一个小提琴，但由于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

1 个答案: