Как разбить навигацию в bxslider на два блока?

Question

[Вениамин Смирнов]

Привет!

Есть такой код bxslider'а:

<div class="row mhide">
			<div class="col-md-2 col-md-offset-1 margintop50 bx-pager">
				<a data-slide-index="0" href="" class="photo-place photo01"></a>
				<a data-slide-index="1" href="" class="photo-place photo02"></a>
				<a data-slide-index="2" href="" class="photo-place photo03"></a>				
			</div>

			<div class="col-md-6 col-sm-6">
			<div class="">
				<ul class="bxslider">
  					<li><img src="img/gallery/1.jpg" /></li>
  					<li><img src="img/gallery/2.jpg" /></li>
  					<li><img src="img/gallery/3.jpg" /></li>
  					<li><img src="img/gallery/4.jpg" /></li>
  					<li><img src="img/gallery/5.jpg" /></li>
  					<li><img src="img/gallery/6.jpg" /></li>
				</ul>
			</div>
			</div>

			<div class="col-md-2 bx-pager">
				<a data-slide-index="3" href="" class="photo-place photo04"></a>
				<a data-slide-index="4" href="" class="photo-place photo05"></a>
				<a data-slide-index="5" href="" class="photo-place photo06"></a>			
			</div>
		</div>

Проблема в том, что 2 дива с классом bx-pager воспринимаются слайдером как 1 и они конфликтуют между собой. А мне нужно разбить элементы навигации на 2 блока, которые будут слева и справа от центрального превью отображаться + активный элемент подсвечивается border в 2 пикселя.

Когда элементы управления находятся в одном диве bx-pager - всё работает ок. Но как только размещаю их в разные дивы, то всё рушится.

Как это можно исправить?

Answer 1

[ArturArturov]

первой половине эелементов a float:left, остальным - float:right. сам слайдер отцентрировать. бутстрап идет в топку

Comments

[Вениамин Смирнов]

Дык дело в том, что навигация должна находиться в 1 диве.

[ArturArturov]

так она и будет, вам надо трогать теги А

[ArturArturov]

а диву width: 100%

[ArturArturov]

Если надо с position: absolute поиграться

[ArturArturov]

и про z-index не забыть

[Вениамин Смирнов]

Нет, наверное, Вы не так поняли... Мне нужно все "а" поместить в один див с классом bx-pager. Второй див - сам слайдер с классом bxslider. И после этого див с классом bx-pager разместить по обе стороны bxslider по 3 элемента слева и справа.

[ArturArturov]

я правильно понял. вам ничего не мешает расставить элементы A в диве с классом bx-pager, так как вы хотите. див с классом bx-pager будет перекрывать див с классом bxslider, но для этого есть z-index

[Вениамин Смирнов]

ArturArturov: вернулся к Вашему ответу спустя 2 недели, всё сделал. Спасибо вам!