jquery - jquery bxslider 在页面中居中

Question

在我的DEMO上会很清楚。我有 2 个视图，创建的功能是在调整屏幕大小时更改插件的设置。

Settings1 只有 1 张幻灯片 Settings2 有 3 张幻灯片

最大宽度为 1600，当设置更改时，我们应该有相同的活动/当前幻灯片居中！！！！！！特别是大屏幕的时候。

编 解码器

var startnum = 0,
mySlider, settings1 = {
  useCSS: false,
  auto: false,
  pager: true, 
  minSlides: 1,
  maxSlides: 1,
  startSlide: startnum,
  moveSlides: 1,
  responsive: true,
    slideWidth: 1600,

  onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
  },
  onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
  },
  onSliderLoad: function (currentSlideHtmlObject) {
      $('#carousel').removeClass('settings2');
      $('#carousel').css('display', 'block').addClass('settings1');
      $('#carousel').fadeIn('slow');
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
  }

}, settings2 = {
  useCSS: false,
  auto: false,
  pager: true,      
  minSlides: 1,
  maxSlides: 3,
  startSlide: startnum,
  moveSlides: 1,
  responsive: true,
  slideWidth: 1600,

  onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active');
  },
  onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
  },
  onSliderLoad: function (currentSlideHtmlObject) {
      $('#carousel').removeClass('settings1');
      $('#carousel').css('display', 'block').addClass('settings2');
      $('#carousel').fadeIn('slow');
      $('#carousel > li.active').removeClass('active');
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active');
  }
};

function settings() {
  return ($(window).width() < 1600) ? settings1 : settings2;
}
mySlider = $('#carousel').bxSlider(settings());

function tourLandingScript() {
  //alert(settings() +"   "+ mySlider.getCurrentSlide());
  mySlider.reloadSlider($.extend(settings(), {
      startSlide: mySlider.getCurrentSlide()
  }));
}

$(window).resize(tourLandingScript);