Отзывы грузоотправителей для сайта на Tilda

<section class="vbogo">
  <div class="vbogo-wrap">
    <div class="vbogo-head">
      <div class="vbogo-head__t">
        <h2 class="vbogo-h2">Кого и куда мы возим</h2>
        <p class="vbogo-lead">Отзывы грузоотправителей, с которыми работаем по договору. В карточке указано, что именно ехало, по какому маршруту, каким объёмом и за сколько дней.</p>
      </div>
      <div class="vbogo-nav">
        <button type="button" class="vbogo-arr" id="vbogo-prev" aria-label="Предыдущий отзыв">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg>
        </button>
        <button type="button" class="vbogo-arr" id="vbogo-next" aria-label="Следующий отзыв">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 5l7 7-7 7"/></svg>
        </button>
      </div>
    </div>

    <div class="vbogo-track" id="vbogo-track" tabindex="0" aria-label="Лента отзывов грузоотправителей"></div>
    <div class="vbogo-dots" id="vbogo-dots"></div>
  </div>
</section>

<style>
.vbogo, .vbogo *, .vbogo *::before, .vbogo *::after { box-sizing: border-box; }
.vbogo {
  --acc: #2f5f86; --acc-dark: #244a69; --ink: #16202a; --muted: #5c6a78; --line: #dde4ea; --soft: #f2f6f9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbogo-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbogo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 3vw, 36px); }
.vbogo-head__t { max-width: 42em; }
.vbogo-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbogo-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.vbogo-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.vbogo-arr { width: 48px; height: 48px; border: 1.5px solid var(--line); margin: 0; padding: 0; -webkit-appearance: none; appearance: none;
  cursor: pointer; border-radius: 50%; background: #fff !important; color: var(--ink) !important;
  display: flex; align-items: center; justify-content: center; transition: .18s ease; }
.vbogo-arr svg { width: 20px; height: 20px; }
.vbogo-arr:hover { border-color: var(--acc); color: var(--acc) !important; }
.vbogo-arr[disabled] { opacity: .35; cursor: default; }

.vbogo-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.vbogo-track::-webkit-scrollbar { display: none; }
.vbogo-track:focus { outline: 2px solid var(--acc); outline-offset: 4px; }
.vbogo-card { flex: 0 0 clamp(272px, 40%, 400px); scroll-snap-align: start; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; }
.vbogo-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vbogo-ava { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--acc);
  display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 15px; font-weight: 700; }
.vbogo-card__id { min-width: 0; }
.vbogo-card__n { font-family: var(--fh); font-size: 15.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.vbogo-card__c { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.vbogo-meta { list-style: none; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.vbogo-meta li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.vbogo-meta span { flex: 0 0 84px; color: var(--muted); font-size: 12.5px; }
.vbogo-meta b { flex: 1 1 auto; font-weight: 600; line-height: 1.4; }
.vbogo-card p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.vbogo-card__d { display: block; margin-top: auto; font-size: 12px; color: #93a1ad; }

.vbogo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
.vbogo-dot { width: 8px; height: 8px; padding: 0; margin: 0; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  border-radius: 50%; background: #c4cfd8 !important; transition: .2s ease; }
.vbogo-dot--on { background: var(--acc) !important; width: 24px; border-radius: 999px; }

@media (max-width: 720px) {
  .vbogo-head { flex-direction: column; align-items: stretch; }
  .vbogo-nav { justify-content: flex-end; }
  .vbogo-card { flex: 0 0 86%; }
}
@media (prefers-reduced-motion: reduce) {
  .vbogo * { transition: none !important; }
  .vbogo-track { scroll-behavior: auto; }
}
</style>

<script>
(function () {
  /* ОТЗЫВЫ ГРУЗООТПРАВИТЕЛЕЙ */
  var REVIEWS = [
    { co: 'Мебельная фабрика «Ольхон»', city: 'Ульяновск', cargo: 'Корпусная мебель в упаковке',
      route: 'Ульяновск - Екатеринбург', vol: '18 м³, 2 100 кг', term: '3 дня', date: 'отправляем с марта 2022 года',
      text: 'Возим готовые кухни в розничные точки, для нас критично, чтобы фасады приехали без сколов. За два года был один страховой случай, разобрали за неделю и выплатили по объявленной стоимости. Диспетчер сам звонит, когда машина выходит на выгрузку.' },
    { co: 'Тепличный комбинат «Луговое»', city: 'Липецк', cargo: 'Овощи в термоконтейнерах',
      route: 'Липецк - Москва', vol: '12 паллет, 4 800 кг', term: '1 день', date: 'три рейса в неделю',
      text: 'Рефрижератор подаётся к семи утра, температуру ставят по нашей заявке и присылают распечатку с датчика вместе с накладной. Ни один рейс за сезон не сдвинулся больше чем на два часа. Для скоропорта это главное.' },
    { co: 'Строймаркет «Кедр»', city: 'Тюмень', cargo: 'Профиль, гипсокартон, сухие смеси',
      route: 'Тюмень - Сургут', vol: '20 тонн, отдельная машина', term: '2 дня', date: 'декабрь, зимний завоз',
      text: 'Заказывали отдельную машину под зимний завоз, дорога тяжёлая, ждали срыва сроков. Приехали в оговорённый день, водитель предупредил про метель заранее и предложил сдвинуть выгрузку на утро. Документы получили сканами в тот же вечер.' },
    { co: 'Завод упаковки «Полипак»', city: 'Казань', cargo: 'Гофрокороб, стрейч-плёнка',
      route: 'Казань - Новосибирск', vol: '34 м³, 3 400 кг', term: '5 дней', date: 'ежемесячная отправка',
      text: 'Груз объёмный и лёгкий, раньше платили как за полную фуру. Здесь посчитали по объёмному весу и показали расчёт в заявке, вышло примерно на четверть дешевле прошлого перевозчика. Считаем сами в калькуляторе, цифры совпадают.' },
    { co: 'Аптечная сеть «Здравица»', city: 'Воронеж', cargo: 'Медикаменты, режим от 2 до 8 градусов',
      route: 'Воронеж - Ростов-на-Дону', vol: '6 м³, 900 кг', term: '2 дня', date: 'работаем второй год',
      text: 'Требования к перевозке лекарств жёсткие, проверяли документы на транспорт и обучение водителей. Всё предоставили в первый день, режим соблюдается, журнал температур приходит по каждой отправке. Проверка Росздравнадзора вопросов не задала.' },
    { co: 'Автозапчасти «Мотор-Плюс»', city: 'Самара', cargo: 'Запчасти и агрегаты, сборный груз',
      route: 'Самара - Пермь', vol: 'от 0,3 до 4 м³', term: '2-3 дня', date: 'мелкие отправки почти ежедневно',
      text: 'Отправляем по несколько коробок в день разным клиентам. Приём груза до восьми вечера, номер накладной сразу уходит покупателю, дальше он сам смотрит движение. Претензий по недостачам за год не было ни одной.' }
  ];

  var roots = document.querySelectorAll('.vbogo');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var track = root.querySelector('#vbogo-track');
    var dots = root.querySelector('#vbogo-dots');
    var prev = root.querySelector('#vbogo-prev');
    var next = root.querySelector('#vbogo-next');

    track.innerHTML = REVIEWS.map(function (r) {
      var ini = r.co.replace(/[«»"]/g, '').charAt(0);
      return '<article class="vbogo-card"><div class="vbogo-card__top">' +
        '<span class="vbogo-ava">' + ini + '<\/span>' +
        '<div class="vbogo-card__id"><h3 class="vbogo-card__n">' + r.co + '<\/h3>' +
        '<span class="vbogo-card__c">' + r.city + '<\/span><\/div><\/div>' +
        '<ul class="vbogo-meta">' +
        '<li><span>Возили<\/span><b>' + r.cargo + '<\/b><\/li>' +
        '<li><span>Маршрут<\/span><b>' + r.route + '<\/b><\/li>' +
        '<li><span>Объём<\/span><b>' + r.vol + '<\/b><\/li>' +
        '<li><span>Срок<\/span><b>' + r.term + '<\/b><\/li><\/ul>' +
        '<p>' + r.text + '<\/p><span class="vbogo-card__d">' + r.date + '<\/span><\/article>';
    }).join('');

    dots.innerHTML = REVIEWS.map(function (r, i) {
      return '<button type="button" class="vbogo-dot' + (i === 0 ? ' vbogo-dot--on' : '') +
        '" data-i="' + i + '" aria-label="Отзыв ' + (i + 1) + '"><\/button>';
    }).join('');

    function step() {
      var card = track.querySelector('.vbogo-card');
      return card ? card.offsetWidth + 16 : 300;
    }
    function current() {
      return Math.round(track.scrollLeft / step());
    }
    function go(i) {
      track.scrollLeft = i * step();
    }
    function sync() {
      var i = current();
      var ds = dots.querySelectorAll('.vbogo-dot');
      for (var j = 0; j < ds.length; j++) ds[j].className = 'vbogo-dot' + (j === i ? ' vbogo-dot--on' : '');
      prev.disabled = track.scrollLeft < 6;
      next.disabled = track.scrollLeft + track.clientWidth >= track.scrollWidth - 6;
    }

    prev.addEventListener('click', function () { go(Math.max(0, current() - 1)); });
    next.addEventListener('click', function () { go(Math.min(REVIEWS.length - 1, current() + 1)); });
    dots.addEventListener('click', function (e) {
      var b = e.target.closest ? e.target.closest('.vbogo-dot') : null;
      if (b) go(+b.getAttribute('data-i'));
    });

    var tick = 0;
    track.addEventListener('scroll', function () {
      if (tick) return;
      tick = setTimeout(function () { tick = 0; sync(); }, 90);
    });
    window.addEventListener('resize', sync);
    sync();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.