[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

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