CODEWITHSUNDEEP
javascriptjqueryresizebxslider
SaurabhLP
SaurabhLP

Reputation: 3657

Update size of content slider on resize in bxslider

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.

I am using this code:-

$(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();

});

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.

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 has parameters like adaptiveHeight: true, responsive:true , Does it helps in this case?? Why is that so?

Any Ideas how this problem be resolved???

Upvotes: 0

Views: 1804

Answers (1)

Ramanathan Muthuraman
Ramanathan Muthuraman

Reputation: 752

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);

});

Upvotes: 1

Related Questions