Как сделать индикаторы полоской?

Question

[L1nw0od]

Доброго времени суток, есть вопрос по поводу бутстрап слайдера, скажите пожалуйста как сделать вот такие индикаторы ?
Чтоб при прокрутке полоска заполнялась?

<div id="MainCarousel" class="carousel fade" data-ride="carousel">

	<ol class="carousel-indicators">
		<li data-target="#MainCarousel" data-slide-to="0" ></li>
		<li data-target="#MainCarousel" data-slide-to="1" class="active"></li>
		<li data-target="#MainCarousel" data-slide-to="2"></li>
	</ol>


	<div class="carousel-inner">
		<div class="item ">
	<img src="img/slider1.jpg" alt="...">
		</div>
		<div class="item active">
	<img src="img/slider1.jpg" alt="...">
		</div>
	</div>

	<a class="left carousel-control" href="#MainCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#MainCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>

Answer 1

[Антон Усачев]

1. Заверстать такую полоску, в ней элемент с нулевой шириной и белой заливкой.
2. Взять все слайды за 100% (допустим, их 4).
3. Смотреть какой слайд в данный момент активен (допустим, третий) и считать ширину заливочного элемента:

$('.заливочный_элемент').width(100 / все_слайды.length * (активный_слайд.index() + 1) + '%');

4. Получаем 75% ширины.

Comments

[L1nw0od]

Большое спасибо ) можно было бы попросить кусок грубого кода кинуть с такой штукой ?
могу дать ссылку на этот блок( с jQuery чуть тяжко - пока изучил очень хорошо цсс и бутстрап.
--
А так огромное спасибо

[Антон Усачев]

L1nw0od, я с каруселью от бутстрап не очень знаком, но если выложишь на codepen или jsfiddle рабочий пример, могу поковырять.

[L1nw0od]

Антон Усачев, ВОт нашел готовый пример 1 в 1 карусели как у меян ссылка кодепен
только там индикаторы на белом фоне и их не видно - а так 1 в 1 как 3у меня

[Антон Усачев]

L1nw0od,

[L1nw0od]

Антон Усачев, Спасибо большое)