Блог

Главная - Вопросы по программированию - индикатор выполнения временной шкалы с ползунками

индикатор выполнения временной шкалы с ползунками

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть такая временная шкала. Но если точек много, это выглядит не очень красиво. Как я могу добавить функциональность, например, слайдер? Будет отображаться (только первые 5 лет), а остальные появятся после перехода между годами.

Как я могу это сделать? Или, может быть, есть какие-то библиотеки с такой функциональностью.

 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-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 {
  transform:scale(5);
}

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>
    </div>
    <div class="slide time">
      <a href=""><i>1981</i></a><span> 1981 </span>
    </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:

Я могу изменить цвет прокрутки по горизонтали, если вы хотите изменить его по своему вкусу

 .slides :: - webkit-scrollbar-thumb {
   background: transparent;
   border-radius: 10px;
}
 
 function initProgress() {
  var activeDist = $(".slide a.active").position();
  activeDist = activeDist.left;
  $(".after").stop().animate({
    width: activeDist   "px"
  });
}
initProgress();
$("a").click(function(e) {
  
  $(".slide a").removeClass("active");
  $(this).addClass("active");
  initProgress();
});
$(window).resize(function() {
  initProgress();
}); 
 * {
  box-sizing: border-box;
}

.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 0px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.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 > i {
  display: block;
  position: absolute;
  top: -40px;
  left: -12px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  line-height: 30px;
  color: white;
  font-style: normal;
  font-size: 11px;
}
.slide a.active,
.slide a:hover {
  border-color: white;
  background: white;
}

.slide a.deactive {
  border: none;
  width: 0px;
}

/* Don't need button navigation */
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #74ABE2, #5563DE);
  font-family: 'Ropa Sans', sans-serif;
}




.slide span {
  display: none;
  opacity: 0;
  display: block;
  position: fixed;
  top: 150px;
  left: 0;
  right: 0;
  color: white;
}

.slide a.active>i {
  transform:scale(5);
}

.slide a.active~span {
  display: block;
  opacity: 1;
}
.time {
  display: table-cell;
  text-align: center;
}




.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%;
} 
 <div class="slider">
  
<div class="container">
     <div class="before"></div>
  <div class="after"></div>
  <div class="container__track timeline">
    <div class="slide time">
      <a href="#slide-1" class="active"><i>1979</i></a>
    </div>
 
   <div class="slide time">
      <a href="#slide-2" class=""><i>1980</i></a>
    </div>
    
      <div class="slide time">
      <a href="#slide-3" class=""><i>1981</i></a>
    </div>
    
      <div class="slide time">
      <a href="#slide-4" class=""><i>1982</i></a>
    </div>
    
      <div class="slide time">
      <a href="#slide-5" class=""><i>1983</i></a>
    </div>
 <div class="slide time">
      <a href="#slide-6" class=""><i>1984</i></a>
    </div>
  </div>
  </div>

  <div class="slides">
    <div id="slide-1">
      <span> 1979 </span>
    </div>
    <div id="slide-2">
      <span> 1980 </span>
    </div>
    <div id="slide-3">
     <span> 1981 </span>
    </div>
    <div id="slide-4" >
      <span> 1982 </span>
    </div>
    <div id="slide-5">
     <span> 1983 </span>
    </div>
     <div id="slide-6">
     <span> 1984 </span>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Комментарии:

1. индикатор выполнения должен работать так только для существующих слайдов

2. Я немного изменил код, чтобы посмотреть, как это

3. Мне не нужно добавлять слайды, если они не существуют. Их будет определенное количество (например, 10). На временной шкале отображались только 5, а следующие отображались при переходах.

4. мне нужно достичь видения чего-то подобного, чтобы codepen.io/abhishekraj/pen/WZZKKw

5. Я предпринял еще одну попытку. Посмотрите, как это происходит.