在bxslider中调整大小时更新内容滑块的大小 [英] Update size of content slider on resize in bxslider

问题描述

我正在使用全屏内容bx滑块，它是幻灯片中具有100％高度的文本和图像的混合，但是不知为何我在调整大小时遇到​​了什么问题.

I am working on a full screen content bx-slider which is mix of text and images inside the slides with 100% height but somehow i dont know what is the problem its facing on 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()时，它将转到第一张幻灯片.

When i resize the screen without reloadSlider(), its width and height takes a weird shape and on applying reloadSlider(), it goes to the first slide..

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

I want the width, height and all useful component to update on resize but stay on current slide.

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

I have designed a fiddle but its not showing the issue because of the iframe whereas in pure html it shows the issue with the height not adjusting to the screen.

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

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

Bx-slider has parameters like adaptiveHeight: true, responsive:true , Does it helps in this case?? Why is that so?

任何想法如何解决此问题?

Any Ideas how this problem be resolved???

推荐答案

在调整大小事件期间，获取当前幻灯片并将其设置为开始幻灯片. 还创建设置对象以配置bxslider.

During re-size event get the current slide and set it as the start slide. Also create settings object to configure the 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中调整大小时更新内容滑块的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！