5

Как реализовать подобный слайдер с прогрессбаром?

Не могу понять, как рассчитывать разницу между годами и следовательно растягивать их по полосе. Чем больше интервал между датами - тем больше расстояние на полосе.

введите сюда описание изображения

4
  • Немного подробнее о разнице между годами. Она пропорциональна датам или как? Или по красоте расставлена? Можно код или ссылку на пример? 18 апр 2020 в 21:24
  • 1
    не понятно чего вы хотите, так, как и не понятно, как расчитываается интервал между двумя датами 18 апр 2020 в 21:32
  • Расстояние между датами рассчитывается, да. Чем больше интервал между датами - тем больше расстояние на полосе 18 апр 2020 в 21:34
  • На изображении расстояние 2005-2007 примерно в полтора раза больше, чем расстояние 2014-2017, что нелогично. Либо это неточный макет, либо это взято с сайта, и там точки на прямой изначально захардкожены. 19 апр 2020 в 11:02

1 ответ 1

13

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>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 7 мая 2020 в 9:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.