Как реализовать подобный слайдер с прогрессбаром?
Не могу понять, как рассчитывать разницу между годами и следовательно растягивать их по полосе. Чем больше интервал между датами - тем больше расстояние на полосе.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак реализовать подобный слайдер с прогрессбаром?
Не могу понять, как рассчитывать разницу между годами и следовательно растягивать их по полосе. Чем больше интервал между датами - тем больше расстояние на полосе.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
background-color: white;
color: royalblue;
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span>Это 1979 год</span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span>Это 1980 год</span><!-- Эту дату устанавливаем активной по умолчанию. Присваиваем класс active -->
</div>
<div class="slide time">
<a href=""><i>1981</i></a><span>Это 1981 год</span>
</div>
<div class="slide time">
<a class="deactive" href=""></a><!-- Пропускаем дату. Просто присваиваем класс deactive (свойства смотрим в стиле). При этом все расстояния остаются верными -->
</div>
<div class="slide time">
<a href=""><i>1983</i></a><span>Это 1983 год</span>
</div>
<div class="slide time">
<a href=""><i>1984</i></a><span>Это 1984 год</span>
</div>
</div>
</div>