Карусель подсказок -- не понятно где остальные подсказки

[Cypher]

Привет. Я только сейчас понял куда делись остальные подсказки к трофеям. Теперь это -- оказывается, горизонтальная карусель!



Сколько месяцев (или лет) я не читал подсказки потому что думал, что они исчезли и превратились в дополнения?

Ну, собсна, я не один такой. Как видно на скриншоте выше народ просто оставляет дополнения к последней бестолковой подсказке. Ну вы вообще! Подсказки -- это же ядро сайта, а вы их так зарыли. Я искренне негодовал почему я вообще ничего не понимаю в подсказках. Почему в единственной подсказке везде написана какая-то чушь, а не объяснение того что и как делать. Я в последнее время даже ушёл на заграничный PSN Trophies потому что нифига не понятно было. А оказалось вон оно как.

Очень прошу и рекомендую добавить, во-первых, заголовок со счётчиком подсказок:



Во-вторых отделить визуально подсказки от дополнений к подсказкам:



В-третьих показать что-то типа навигации по карусели:


Ну и, наконец, когда делаете какой-то скрытый список, то хорошей практикой будет показать обрезанный кусок следующего элемента, чтобы понятно было что там что-то есть:



С вёрсткой готов помочь.

UPD: алсо для подсказок сделали бы что-то вроде принятого ответа как на Stack Overflow. А то вот я написал новую и актуальную, развернутую подсказку, но чтобы она вылетела наверх ей надо надбрать 20 лайков что невозможно в принципе



--------

Лично для себя я эту карусель превратил в обычный горизонтальный скроллбар, чтобы тачпадом можно было крутить, а кнопку "вправо" переделал под кнопку дозагрузки подсказок

Работает так:
http://nuqneh.com/temp/stratege-carousel.mp4

.tlhsltpl_slider_box {
  height: auto;
}

.tlhsltpl_slider_layer {
  position: static;
  display: block;
}

.tlhsltpl_slider_table {
  display: flex;
  width: auto;
  scroll-snap-align: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.tlhsltpl_slider_table_td {
  flex-shrink: 0;
  display: block;
  width: 800px;
  scroll-snap-align: start;
}

.tlhsltpl_relative_helps,
.tlhsltpl_helps_body,
.tlhsltpl_add_helps_header,
.tlhsltpl_add_helps_body,
.tlhsltpl_helps_info_helps,
.tlhsltpl_helps_header_helps,
.tlhsltpl_add_helps_header_box,
.tlhsltpl_helps_admin_helps,
.tlhsltpl_helps_text_helps,
.tlhsltpl_add_helps_text {
  width: 100%;
  box-sizing: border-box;
}

.tlhsltpl_helps_admin_helps.tlhsltpl_helps_adminis  ter_box_hearts.top_button {
  left: 78%
}

.tlhsltpl_left_slider_control {
  display: none;
}

.tlhsltpl_helps_box .tlhsltpl_slider_box {
  overflow: visible;  
}

.tlhsltpl_right_slider_control {
  display: block;
  cursor: pointer;
  height: 50px;
  transform: translateY(-57px) rotate(90deg);
  border-radius: 5px;
  background-position: center center;
}