[_marisha]

Доброго времени суток!
На сайте существует баннер и внизу баннера отображается панель навигации (скрин "Слайдер внизу баннера")
При смене баннера подсвечивается соответствующий пункт внизу.
На данный момент, если добавить много пунктов, то названия выходят за области и расстояние между пунктами становится минимальное (т.е. текст становится нечитаемым).
Хотелось бы сделать так, чтобы при большом количестве пунктов слайдер прокручивался влево и вправо.
Подскажите, пожалуйста, каким образом возможно сделать? Спасибо.

На данный момент навигация строится следующим образом:

jQuery(document).ready(function(){
      jQuery('.main_slider .slider li').css('display','block');
      main_slider = jQuery('.main_slider .slider').bxSlider({
pager:false,
controls:false,
pause:6000,
 mode:'fade',
		  <?if(count($arResult["ITEMS"])>1):?>
 auto:true,
<?endif;?>
          onSlideAfter: function ($slideElement, oldIndex, newIndex) {
              jQuery('.slider_pager li').removeClass('active');
              if (jQuery('.slider_pager .pages').eq(0).find('li').eq(newIndex).length) {
                  jQuery('.slider_pager .pages').eq(0).find('li').eq(newIndex).addClass('active');
              } else {
                  jQuery('.slider_pager .pages').eq(1).find('li').eq(newIndex-jQuery('.slider_pager .pages').eq(0).find('li').length).addClass('active');
              }
          }
      });
      jQuery('.slider_pager li').eq(0).addClass('active');
      jQuery('.slider_pager li').click(function () {
          main_slider.goToSlide(jQuery('.slider_pager li').index(jQuery(this)));
          jQuery('.slider_pager li').removeClass('active');
          jQuery(this).addClass('active');
      });
})