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