jquery bxslider to be centered in the page

Question

On my DEMO will be really clear. I got 2 views, created with a function which on resizing the screen change the settings of the plugin.

Settings1 has only 1 slide Settings2 has 3 slides

The max-width is 1600 and when the setting changes we should have the same active/current slide centered!!!!! specially when is a big screen.

CODEPEN FIDDLE

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