bxslider булиты(представления) в виде слайдера
 

Доброго времени суток.
Есть задача, представить булиты(или представления) на слайдере, что бы они менялись вслед за слайдом, в виде перетекающего, зацикленного, текста.

http://prntscr.com/7tzqd7

Пробовал совместить как два слайдера, с установкой pagerCustom, но после задания второго слайдера, поехала внутренняя индексация, причем не для самих отображений, а для задаваемого самим скриптом класса "active".
Имеет ли смысл пытаться совмещать слайдеры дальше, или лучше покопаться в коде и попробовать совместить их перетекание?
Если да - то как лучше это сделать? Переписывать bxslider заново что-то не хочется)
Как понимаю, надо оставлять pagerCustom и копать в сторону развития данного места скрипта?:

/**
		 * Populates the pager with proper amount of pages
		 */
		var populatePager = function(){
			var pagerHtml = '';
			var pagerQty = getPagerQty();
			// loop through each pager item
			for(var i=0; i < pagerQty; i++){
				var linkContent = '';
				// if a buildPager function is supplied, use it to get pager link value, else use index + 1
				if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
					linkContent = slider.settings.buildPager(i);
					slider.pagerEl.addClass('bx-custom-pager');
				}else{
					linkContent = i + 1;
					slider.pagerEl.addClass('bx-default-pager');
				}
				// var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
				// add the markup to the string
				pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
			};
			// populate the pager element with pager links
			slider.pagerEl.html(pagerHtml);
		}

Baton1777,
а можно как то попроще обьяснить что вы хотите сделать? зачем нужен второй слайдер?

рони,
Можно. В общем-то уже почти сделал, только вот никак не пойму, как мне отцентрировать активный эллемент во втором слайдере так, что бы при этом были видны и другие слайды?..
В общем, вот код:

<script>
  $(function () {
 var slider = $('#bx-pager').bxSlider({
 speed: 500,
 wrapperClass: "bx-wrapper",
 autoHover: true,
 pause: 3000,
 pagerCustom: '#bx-pager1',
 maxSlides: 3,
moveSlides: 1
});
 
 
 $('#promo-slider').bxSlider({
 onSlideNext: function($slideElement, oldIndex, newIndex){ slider.goToNextSlide(); },
 onSlidePrev: function($slideElement, oldIndex, newIndex){ slider.goToPrevSlide(); },
 auto: true,
 speed: 500,
 wrapperClass: "bx-wrapper",
 autoHover: true,
 pause: 3000,
 pagerCustom: '#bx-pager1'
});

  })
  </script>


<div style="position:relative">
  		<div id="promo-slider" class="owl-carusel">
		<div class="promo-picture" style="background:url(images/pict/promo-pict.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-2.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-3.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-4.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-5.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-6.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-7.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-8.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-9.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-10.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-11.jpg) no-repeat center; background-size: inherit"></div>
        <div class="promo-picture" style="background:url(images/pict/promo-pict-12.jpg) no-repeat center; background-size: inherit"></div>
  		</div>
		<div id="bx-pager1">
		<center><div id="bx-pager">
               	  <div class="bxp_text stl0"><a data-slide-index="0" href="">- LED -</a></div>
				  <div class="bxp_text stl1"><a data-slide-index="1" href="">- POWER SUPPLIES -</a></div>
				  <div class="bxp_text stl2"><a data-slide-index="2" href="">- OPTICAL LENSES -</a></div>
				  <div class="bxp_text stl3"><a data-slide-index="3" href="">- SENSORS -</a></div>
				  <div class="bxp_text stl4"><a data-slide-index="4" href="">- LIGHT CONTROLS -</a></div>
				  <div class="bxp_text stl5"><a data-slide-index="5" href="">- SEMICONDUCTORS -</a></div>
				  <div class="bxp_text stl6"><a data-slide-index="6" href="">- BARE DIE -</a></div>
				  <div class="bxp_text stl7"><a data-slide-index="7" href="">- MICROCONTROLLERS -</a></div>
				  <div class="bxp_text stl8"><a data-slide-index="8" href="">- HIGH PERFORMANCE ANALOG -</a></div>
				  <div class="bxp_text stl9"><a data-slide-index="9" href="">- WIRELESS -</a></div>
				  <div class="bxp_text stl10"><a data-slide-index="10" href="">- PASSIVE -</a></div>
				  <div class="bxp_text stl11"><a data-slide-index="11" href="">- ELECTRO-MECHANICS -</a></div>
		</div></center></div>
		</div>

При этом, в основной файле jquery.bxslider.js была сделана добавка (slideIndex + 3), что бы отображался активным именно тот элемент, который нужен:

slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex + 3).addClass('active'); });

В css это выглядит сейчас так:

#bx-pager .bxp_text{
float:left;
height:60px;
width:-1px !important;
  margin-right: -18px;
}

#bx-pager .bxp_text a{
font-family: 'Open Sans', sans-serif;
  font-size: 55px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
}
#bx-pager .bxp_text a:hover,
#bx-pager .bxp_text a:active,
#bx-pager .bxp_text a.active{
  color: #ff8500;
    z-index: 100;
 }
 
 #bx-pager1 {
	position: absolute;
	margin: 0 auto 60px;
	padding: 0;
	top:420px;
	width:1349px;
	}
#bx-pager1 .bx-wrapper{
width: 1349px !important;
max-width:1349px !important;}

.stl0{width: 164px!important;}
.stl1{width: 511px!important;}
.stl2{width: 490px!important;}
.stl3{width: 304px!important;}
.stl4{width: 519px!important;}
.stl5{width: 561px!important;}
.stl6{width: 300px!important;}
.stl7{width: 619px !important;}
.stl8{width: 846px!important;}
.stl9{width: 315px!important;}
.stl10{width: 271px!important;}
.stl11{width: 626px!important;}

А внешне - так:
http://prntscr.com/7u56f9

В общем, надо теперь передвинуть активный эллемент к центру. Если убрать фиксированные width, то эллемент выравнивается, но при этом - уезжают все остальные...
Желательный итоговый вид всего этого счастья:
http://prntscr.com/7u572g

Вот, как-то так..

Baton1777,
сделали бы макет в какой нибудь песочнице

рони,
Прошу:
http://plnkr.co/edit/8pvd4IROcT5N3jLoeHu6?p=preview

Baton1777,
может из #bx-pager второй слайдер не делать а просто смещать до нужного элемента ?

рони,
И как вы предлагаете это сделать?

как-то так

рони,
Благодарю, направление понял, буду думать. если что - ещё обращусь)

рони,
В общем, осталось только понять, как их в круговой вариант завязать..)