如何显示页数（1 / X）？

Question

function horizontalScroll(e) {
  isHorizontal = true;
  var that = this;
  that.elementWidth = that.elementWidth || getColumnWidth(that);

  var scrollDirection = (e.wheelDeltaY) ? (0 - e.wheelDeltaY) : (e.detail),
    actualColumn = Math.round(that.scrollLeft / that.elementWidth),
    targetColumn = (scrollDirection > 0) ? actualColumn + 1 : actualColumn - 1;

  if (scrollElementToColumn(that, targetColumn)) {
    e.preventDefault();
  } else {
    isHorizontal = false;
  }
}

function horizontalClick(that, to) {
  isHorizontal = true;

  that.elementWidth = that.elementWidth || getColumnWidth(that);

  var actualColumn = Math.round(that.scrollLeft / that.elementWidth),
    targetColumn = actualColumn + to;

  if (!scrollElementToColumn(that, targetColumn)) {
    isHorizontal = false;
  }
}

function getColumnWidth(that) {
  var style = window.getComputedStyle(that, null);
  var columnWidth = parseFloat(style.columnWidth || style.MozColumnWidth || style.webkitColumnWidth);
  var columnGap = parseFloat(style.columnGap || style.MozColumnGap || style.webkitColumnGap);
  return columnWidth + columnGap;
}

function scrollElementToColumn(that, columnIndex) {
  that.elementWidth = that.elementWidth || getColumnWidth(that);

  var expectedPlaceToScroll = Math.round(columnIndex * that.elementWidth),
    distanceToScroll = Math.abs(that.scrollLeft - expectedPlaceToScroll),
    defaultScrollShift = 30,
    savedScrollLeft = that.scrollLeft,
    scrollShift = (defaultScrollShift < distanceToScroll) ? defaultScrollShift : distanceToScroll;

  if (that.scrollLeft < expectedPlaceToScroll) {
    that.scrollLeft = that.scrollLeft + scrollShift;
  } else if (that.scrollLeft > expectedPlaceToScroll) {
    that.scrollLeft = that.scrollLeft - scrollShift;
  }

  if (that.scrollLeft !== expectedPlaceToScroll && savedScrollLeft !== that.scrollLeft) {
    that.actuallyMoving = setTimeout(function() {
      scrollElementToColumn(that, columnIndex)
    }, 10);
    return true;
  }

  if (that.actuallyMoving) clearTimeout(that.actuallyMoving);
  return false;
}

$(document).ready(function() {
  var elems = document.getElementsByClassName('mario');
  var scx = document.getElementById('screenx');
  var i;
  for (i = 0, nb = elems.length; i < nb; i++) {
    if (elems[i].addEventListener) {
      elems[i].addEventListener("mousewheel", horizontalScroll, false); // IE9, Chrome, Safari, Opera
      elems[i].addEventListener("DOMMouseScroll", horizontalScroll, false); // Firefox
    } else elems[i].attachEvent("onmousewheel", horizontalScroll); // IE 6/7/8
  }

  $("#next").on('click', function() {
    horizontalClick(elems[0], 1);
  });

  $("#prev").on('click', function() {
    horizontalClick(elems[0], -1);
  });

  // at least 100 px are a swipe
  // you can use the value relative to screen size: window.innerWidth * .1
  const offset = 100;
  let xDown, yDown

  scx.addEventListener('touchstart', e => {
    const firstTouch = getTouch(e);

    xDown = firstTouch.clientX;
    yDown = firstTouch.clientY;
  });

  scx.addEventListener('touchend', e => {
    if (!xDown || !yDown) {
      return;
    }

    const {
      clientX: xUp,
      clientY: yUp
    } = getTouch(e);
    const xDiff = xDown - xUp;
    const yDiff = yDown - yUp;
    const xDiffAbs = Math.abs(xDown - xUp);
    const yDiffAbs = Math.abs(yDown - yUp);

    // at least <offset> are a swipe
    if (Math.max(xDiffAbs, yDiffAbs) < offset) {
      return;
    }

    if (xDiffAbs > yDiffAbs) {
      if (xDiff > 0) {
        horizontalClick(elems[0], -1);
      } else {
        horizontalClick(elems[0], 1);
      }
    } else {
      if (yDiff > 0) {
        console.log('up');
      } else {
        console.log('down');
      }
    }
  });

  window.addEventListener('keydown', function(e) {
    switch (e.which) {
      case 37: // left
        horizontalClick(elems[0], -1);
        break;

      case 39: // right
        horizontalClick(elems[0], 1);
        break;

      default:
        return; // exit this handler for other keys
    }

    e.preventDefault(); // prevent the default action (scroll / move caret)
  });

  window.addEventListener('resize', function(e) {
    console.log('resizing, i saw you !');
    for (i = 0, nb = elems.length; i < nb; i++) {
      elems[i].elementWidth = getColumnWidth(elems[i]);
    }
  });
});

function getTouch(e) {
  return e.changedTouches[0]
}

@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
  overflow: hidden;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 130vh;
  position: fixed;
  width: 100%;
  -webkit-transform: translateY(30vh);
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}

.background:first-child {
  -webkit-transform: translateY(-15vh);
  transform: translateY(-15vh);
}

.background:first-child .content-wrapper {
  -webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}

.background:nth-child(1) {
  z-index: 3;
}

.poscustomtext {
  display: flex;
  justify-content: center;
  align-items: center;
}

.background:nth-child(3) {
  z-index: 1;
}

.content-wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat;
  text-transform: uppercase;
  -webkit-transform: translateY(40vh);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}

.content-title {
  font-size: 12vh;
  line-height: 1.4;
}

.background.up-scroll {
  -webkit-transform: translate3d(0, -15vh, 0);
  transform: translate3d(0, -15vh, 0);
}

.background.up-scroll .content-wrapper {
  -webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}

.background.up-scroll+.background {
  -webkit-transform: translate3d(0, 30vh, 0);
  transform: translate3d(0, 30vh, 0);
}

.background.up-scroll+.background .content-wrapper {
  -webkit-transform: translateY(30vh);
  transform: translateY(30vh);
}

.background.down-scroll {
  -webkit-transform: translate3d(0, -130vh, 0);
  transform: translate3d(0, -130vh, 0);
}

.background.down-scroll .content-wrapper {
  -webkit-transform: translateY(40vh);
  transform: translateY(40vh);
}

.background.down-scroll+.background:not(.down-scroll) {
  -webkit-transform: translate3d(0, -15vh, 0);
  transform: translate3d(0, -15vh, 0);
}

.background.down-scroll+.background:not(.down-scroll) .content-wrapper {
  -webkit-transform: translateY(15vh);
  transform: translateY(15vh);
}

#prev {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 235, 59, 0.75);
  cursor: pointer;
  position: absolute;
  left: 0;
  top: calc(50% - 50px);
  z-index: 9;
}

#next {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 235, 59, 0.75);
  cursor: pointer;
  position: absolute;
  right: 0;
  top: calc(50% - 50px);
  z-index: 9;
}

article.mario {
  height: 80vh;
  width: calc(80vw - 0px);
  column-width: calc(80vw - 0px);
  column-gap: calc(5vw + 0px);
  column-rule: 2px dotted #ddd;
  overflow: hidden;
  border: solid 8px black;
}

article.mario:hover {
  border: solid 8px gold;
}

.customtext {
  padding-top: 0px;
  padding-right: 40px;
  padding-bottom: 0px;
  padding-left: 40px;
  text-align: justify;
}

<section class="background" id="screenx">
  <div class="content-wrapper">
    <div class="poscustomtext">
      <div id="prev"></div>
      <div id="next"></div>
      <article class="mario">
        <div class="customtext">
          <div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
            <a href="http://vfl.ru/fotos/abca98b122166092.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/abca98b1/22166092_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
          </div>
          <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">В ту пору, когда&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;была анонсирована, мода на стелс-экшены только-только начинала зарождаться, и любой мало-мальски приличный проект, хоть как-то позволяющий игроку бесшумно расправляться с неприятелями, сразу же нарекали “слелсом” и сталкивали лоб в лоб с&nbsp;</span>
            <span
              style="box-sizing: inherit; font-weight: bolder;">Metal Gear Solid</span><span style="box-sizing: inherit;">.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Это только потом выяснится, что в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span>
              <span
                style="box-sizing: inherit;">&nbsp;вообще-то есть много и от&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">, и даже от&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Driver</span>
                <span
                  style="box-sizing: inherit;">. Да и сама по себе боевая система, включая знаменитую (да-да, ту самую, что позже будет популяризована не без помощи&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil 4</span><span style="box-sizing: inherit;">) камеру из-за плеча, куда ближе к&nbsp;</span>
                  <span
                    style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">, нежели детищу&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Konami</span><span style="box-sizing: inherit;">. Но маркетинг ведь - штука сродни эпидемии: что надуют в ушко - в то и уверуешь.</span>
                    <br
                      style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И все было бы ничего, кабы датой релиза не значился конец 2001-го, а в качестве целевой платформы не был бы выбран Dreamcast. Тут даже к Ванге не ходи, чтобы понять всю абсурдность подобного решения - от консоли в ту пору уже публично открестилась даже сама&nbsp;</span>
                      <span
                        style="box-sizing: inherit; font-weight: bolder;">Sega</span><span style="box-sizing: inherit;">, а мир с замиранием сердца ждал релиза второй части похождений Снейка. Неудивительно, что в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span>
                        <span
                          style="box-sizing: inherit;">&nbsp;в итоге сыграли три с половиной человека, а про вышедший спустя полгода PS2-порт львиная доля владельцев данной консоли даже и не слыхивала.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">А жаль, ведь игра вполне себе могла претендовать на лавры одного из лучших консольных экшенов того поколения. Что еще интереснее - перед нами практически уникальный пример проекта, на 80% состоящего из откровенной копипасты, но при этом умело связанной в единое и уж очень гармоничное целое. Причем, как это ни странно, даже обладающего своим узнаваемым лицом.</span>
                          <br
                            style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
          <div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
            <a href="http://vfl.ru/fotos/ef190be422166093.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/ef190be4/22166093_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
          </div>
          <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И хотя разработкой занималась никому доселе не известная шведская студия&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Amuze</span>
            <span
              style="box-sizing: inherit;">, высоко задранную планку качества ощущаешь уже с первых минут. Оркестровые мотивы за авторством&nbsp;</span><span style="box-sizing: inherit; text-decoration-line: underline;">Ричарда Жака</span><span style="box-sizing: inherit;">&nbsp;(британского композитора, к тому времени уже сделавшего себе громкое имя благодаря внушительному списку “сеговских” проектов) пробирают до глубины души. FMV-вставки с “живыми” актерами, стилизованные под новостную сводку, удивляют не на шутку. Равно как и агитационные плакаты, которые можно наблюдать на экране загрузок.</span>
              <br
                style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Но вот уж где геймера ждет настоящий шок, так это на поприще графики. Великолепные модели персонажей (удивило разве что отсутствие мимики, да и сами лица объективно слабее, чем в той же&nbsp;</span>
                <span
                  style="box-sizing: inherit; font-weight: bolder;">Code Veronica</span><span style="box-sizing: inherit;">) и потрясающая детализация окружения, которую ранее, в основном, можно было наблюдать лишь на рендренных фонах - вот чего точно не следовало ожидать от безвестной команды шведов. Движок при этом очень редко дает сбои в виде просадки fps, а сама по себе картинка смотрится очень гладкой и четкой.</span>
                  <br
                    style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Слегка придя в себя от поросячьего восторга, начинаешь разбираться в деталях сюжета. В принципе, ничего из ряда вон здесь игра уже предложить не может. Завязка достаточно стандартна - по крайней мере, если проводить аналогии с художественными фильмами. Главный герой в лице Джека Вейда просыпается в госпитале, где встречается с дочерью убитого основателя ACN - крупнейшей корпорации, служащей законодательным органом будущего. Принципы ее функционирования очень просты - группа специальных агентов, именуемых “хэдхантерами”, выслеживает опаснейших преступников, после чего берет под стражу и отправляет в подводную тюрьму. Там провинившимся супостатам предлагается принять участие в гладиаторской битве на арене. В случае проигрыша ACN имеет право распорядиться внутренними органами потерпевшего фиаско человека на свое усмотрение.</span>
                    <br
                      style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Когда-то Джек и сам был “охотником за головами”, причем номером один. Именно поэтому Энджи и просит нашего героя помочь ей в расследовании убийства. Вот только те самые загадочные события, что привели Джека к больничной койке и амнезии, послужили причиной аннулирования “хэдхантерской” лицензии. Так что, процесс сбора мозаики под названием “Убийство Кристофера Штерна” придется объединить с так называемым “возвращением в школу”.</span>
                      <br
                        style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Поначалу сюжет развивается довольно-таки плавно. В лучших традициях&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span>
                        <span
                          style="box-sizing: inherit;">&nbsp;основную массу ключевых фактов можно подцепить не из роликов (здесь они представлены как в виде кат-сцен на движке, так и CG-видео), а при помощи различных документов и записок, так что не ленитесь осматривать каждый уголок.
                          Однако ближе к финалу вектор развития кардинально сменится, шагнув от былого (уж простите за небольшой спойлер) футуристического детектива в сторону научной фантастики с характерными для нее нотками антиутопии.</span><br style="box-sizing: inherit;">
                          <br
                            style="box-sizing: inherit;"></p>
          <div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
            <a href="http://vfl.ru/fotos/322911f922166094.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362396/322911f9/22166094_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
          </div>
          <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">С точки же зрения геймплея,</span><span style="box-sizing: inherit; font-weight: bolder;">&nbsp;Headhunter</span><span style="box-sizing: inherit;">&nbsp;представляет собой достаточно интересный симбиоз сразу нескольких проектов, названия которых были обозначены в самом начале статьи. Передвижение между ключевыми точками осуществляется верхом на байке, модель управления которым достаточно своеобразна. Да и сам город отличается на редкость убогой проработкой - страшненькие здания с размазанными текстурками, полнейшее отсутствие интерактивности и жителей на улицах. Что таким образом пытались нам показать разработчики - решительно непонятно.</span>
            <br
              style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Основное же действие будет разворачиваться на локациях закрытого типа, как правило отличающихся внушительными размерами. Набор самый стандартный: заправка, офисное здание, морской порт, торговый центр. В ряде случаев будет необходимо решить какую-нибудь головоломку, как правило построенную на стандартном скелете “возьми предмет там и примени его здесь”. В общем, ничего особенного - поклонники&nbsp;</span>
              <span
                style="box-sizing: inherit; font-weight: bolder;">Silent Hill</span><span style="box-sizing: inherit;">&nbsp;и&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Resident Evil</span><span style="box-sizing: inherit;">&nbsp;справятся в два счета.</span><br style="box-sizing: inherit;">
                <br
                  style="box-sizing: inherit;"><span style="box-sizing: inherit;">Куда интереснее дела обстоят с экшен-составляющей, изрядно смахивающей на серию&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Syphon Filter</span><span style="box-sizing: inherit;">. Герой достаточно подвижен - например, может лихо троллить своих врагов, перекатываясь из стороны в сторону. Да, сейчас это уже никого не удивляет, но тогда смотрелось вполне себе в новинку. Вы, конечно же, не поверите, но одной из первых игр (самой первой, если что, был дремучий экшен&nbsp;</span>
                  <span
                    style="box-sizing: inherit; font-weight: bolder;">WinBack</span><span style="box-sizing: inherit;">&nbsp;1999 года розлива) с пресловутой возможностью стрелять из-за угла или баррикад стала именно&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunder</span>
                    <span
                      style="box-sizing: inherit;">.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Арсенал у Джека самый стандартный - пистолет, дробовик, автомат, гранатомет и еще парочка взрывоопасных экземпляров. Единственное новаторство - это пустые гильзы, которые можно использовать для привлечения врагов. Правда, рассчитать траекторию полета оных с высокой точностью порой оказывается достаточно трудно, так что назвать все эту затею хорошей и удобной язык не повернется. Лучше уж старое-доброе “снейковское” простукивание стен.</span>
                      <br
                        style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">К слову, о&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Metal Gear Soild</span><span style="box-sizing: inherit;">. В игре есть ровным счетом три незначительных момента, которые, собственно, и роднят детище&nbsp;</span>
                        <span
                          style="box-sizing: inherit; text-decoration-line: underline;">Кодзимы</span><span style="box-sizing: inherit;">&nbsp;с нашим пациентом. Первое - стелс-миссии, с которыми придется регулярно иметь дело в процессе получения лицензий. Тут уж действительно настоящий "стелс" - никакого оружия кроме собственных рук, с помощью которых Джек не прочь свернуть вражескую шею и вышеупомянутые гильзы. Второе - это оформление самой виртуальной реальности, внутри которой и будет проходить выполнение тестов. Наконец, последнее - это часы с возможностью совершения видеозвонка. Эдакий продвинутый вариант знаменитого кодека.</span>
                          <br
                            style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И, наконец, отдельным пунктом хотелось выделить боссов, в работе над которыми&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Amuze</span>
                            <span
                              style="box-sizing: inherit;">постаралась как следует. Особой харизмой здешние злодеи похвастаться не могут, однако куда важнее для нас тот факт, что каждая битва строго уникальна и требует сугубо индивидуального подхода к тому или иному супостату. Никакой
                              рутиной в духе “хоровод вокруг громилы с последующим “спусканием” в его тушку всего имеющегося арсенала” здесь не пахнет и подавно.</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></p>
          <div style="box-sizing: inherit; color: #555555; font-family: Helvetica, sans-serif, Ariel; font-size: 16px; font-weight: 400;">
            <a href="http://vfl.ru/fotos/fa38ef5422166095.html" target="_blank" rel="noreferrer noopener" style="box-sizing: inherit; background-color: transparent; color: #2fb5d2; text-decoration-line: none; touch-action: manipulation;"><img src="http://images.vfl.ru/ii/1529362397/fa38ef54/22166095_m.jpg" border="0" alt="user posted image" style="box-sizing: inherit; border-style: none; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto;"></a>
          </div>
          <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 1rem; font-size: 0.9375rem; color: #7a7a7a; font-weight: 400; font-family: Helvetica, sans-serif, Ariel;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Подводя итоги, хочется сказать, что судьба&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter</span><span style="box-sizing: inherit;">&nbsp;все же очень печальна. Конечно, даже с натяжкой игра не способна называться хитом, поскольку мелких огрехов хватает и в геймплее, и сюжете. Да и сама по себе концепция, отличающаяся засильем клише, все-таки не может претендовать на значимые лавры. В то же время, перед нами очень качественный проект, который вполне мог бы принести своим создателям больше денег, а для владельцев PS2 и DC стать куда более значимым (в плане известности) подарком, нежели он является. Хотя, впрочем, лучше уж быть эдаким lost treasure, чем служить пустым местом.</span>
            <br
              style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">***</span><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">И напоследок… о сиквеле замолвите слово.</span><br style="box-sizing: inherit;">
              <br
                style="box-sizing: inherit;"><span style="box-sizing: inherit;">В 2004-м году на PS2 и Xbox вышло продолжение под названием&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption</span><span style="box-sizing: inherit;">, действие которого разворачивалось спустя 20 лет с момента окончания оригинальной игры. За прошедшие годы виртуальный мир сильно изменился - теперь это уже был чистейший киберпанк с присущими для него неоновыми небоскребами, а нотки антиутопии заиграли еще сильнее. Как итог - жителей города распределили между двумя кастами, низшей и высшей.</span>
                <br
                  style="box-sizing: inherit;"><br style="box-sizing: inherit;"><span style="box-sizing: inherit;">Несмотря на ряд объективных достоинств, плохого в&nbsp;</span><span style="box-sizing: inherit; font-weight: bolder;">Headhunter: Redemption&nbsp;</span><span style="box-sizing: inherit;">было куда больше. Это и невнятный сюжет, и странное управление с какой-то совершенно недекватной системой прицеливания. Наконец, сменив сеттинг, игра сильно сдала в плане разнообразия локаций. Да и сам по себе графический движок по меркам 2004 года смотрелся просто достойно, но не более того.</span></p>
        </div>
      </article>
    </div>
  </div>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>

需要一种解决方案以这种方式显示页面数（js / jq）：“ X的第1页”。切换到另一个窗口（列）时（例如，内容继续到第二个窗口（列）“ 2 of X”，依此类推）。

它看起来像一个滑块，但不是滑块。带有信息的列是自动形成的，具体取决于窗口的大小，因此，其数目可以随更改的大小而变化。必须显示：当前列/总列（例如1/10），切换到第二列（2/10）时，等等。

我在视觉上想要什么：

Answer 1

我在这里用您的代码示例制作了一个Codepen：

https://codepen.io/dschenk/pen/eoRooz

（这样的代码笔可以帮助其他人更轻松地查看和调试代码）

我首先实现了您要求的页码计数器。您基本上需要做四件事：

• 在HTML中有一个页面计数器将要放置的元素
• 最初设置当前页数和页数。
• 只要更改内容窗口，就更新当前页面。
• 调整窗口大小时更新页面总数。

要实现此目的，您可以创建两个基本功能：

function setAmountOfPages(amountOfPages) {
    $(".page-number > .page-amount").html(amountOfPages);
}

function setCurrentPageNumber(currentPageNumber) {
  $(".page-number > .page-current").html(currentPageNumber);
}

现在，您需要在正确的时间使用正确的参数调用它们。

我希望这是您的起点。

（存在一个错误：单击非常快时，您可以使当前页面显示为“ 0/8”。这是由于计时功能引起的）