@L1nw0od

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

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

5d396753a4202468845872.png
<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>
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
1. Заверстать такую полоску, в ней элемент с нулевой шириной и белой заливкой.
2. Взять все слайды за 100% (допустим, их 4).
3. Смотреть какой слайд в данный момент активен (допустим, третий) и считать ширину заливочного элемента:
$('.заливочный_элемент').width(100 / все_слайды.length * (активный_слайд.index() + 1) + '%');

4. Получаем 75% ширины.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы