? ????? ?? ??? ?? ???? ???? ???? ???? ????? ???? ?? ???? N?? ???? ??? ?????. ??? ??? ???? ???? ???? ?? ?? ??? ?????. ?? ??? ??? ??? ?? ????? ?? ???? ?? ????? ??? ?? ??? ???? ?? ??? ???? ?? ???? ???? ?????.

?? ??? ??(?: ???, ? ?? ?)? ??? ? ?? ??? ?? ? ??? "??" ?? "???"? ???? ?? ??? ????. ?? ?????, ?? ???? ?? ????? ??? ??? ??? ???? ? ? ???, ? ??? ?? ???? ?? ??? ??? N(?: N=3)? ??? ? ????. N? ???? ??? N(???) ?? -N(???)?? ????.

?? ?? ??? ??

?? ???? ??? ??? ???? ?? ?? ???? ???? ???? ??? ????. ???? ?? ????? ???? ??? ?????? ??? ?????? ?? ??? N? ???????? ?? ??, ??? ?? ??? ?????.

 ?? getOffset(?? ???, ???, ??) {
  const diff = ??? - currentIndex;

  if (?? === 0) {
    0? ?????.
  } else if (??  3 && diff = ?? - 3) {
      //?? ??? ??? -1? -3 ?????. return diff - length;
    } ? ?? {
      //??? 1? 3 ?????. return diff;
    }
  }
}

? ??? ???? ????? ??? ??? ?? if/else ?? Math.min/max ??? ?? ???? ?? ??? ???? ?? ???? ????? ????.

??? ??? ?? ??? ??

?? ??? ????? ?? ??? ??(??? ??)? ??? ???? ?? ??? ?? ??? ?? ???? ??? ? ????. ?? ????? ?? ?? ??? ? ??? ??? "???" ??? ??? ?? ? ??? ???? ?? ???? ???? ????.

??? ???? getOffset ?????.

 /**
 * ?? ???? ???? ?? ???? ???? ?? ???? N?? ?????.
 *
 * @param {number} currentIndex ?? ??????.
 * @param {number} ??? ?? ??????.
 * @param {number} length ??? ?? ?????.
 * @param {number} maxOffset ???? ?? ??????(?: 3).
 * @returns {number} ?? ???? ???? ? ?? ???? ?????, ??? [-maxOffset, maxOffset],
 * ??? ???? maxOffset ?? -maxOffset?? ????.
 */
?? getOffset(currentIndex, index, length, maxOffset = 3) {
  // 1. ? ??? ??? "???" ??? ??? ?????.
  // (index - currentIndex length) ??? ???? ???? % length? 0?? length-1??? ??? ?????.
  const diff = (??? - ?? ??? ??) % ??;

  // 2. ?? ??? ???? ?? ???? ?????.
  if (diff = ?? - maxOffset) {
    // ?? ??? ?? - maxOffset?? ??? ?? ??,
    // ?? ?? ???? ?? ???? currentIndex ?? ??? ???? "??" ? ?? ???? ?????.
    // ?? ?? ??=10, maxOffset=3, currentIndex=0, index=7???.
    // diff = 7. ?? - maxOffset = 7.
    // 7 >= 7? ?????.
    // diff ?? - ?? = 7 - 10 = -3.
    // ???? currentIndex-1, currentIndex-2, ..., currentIndex-maxOffset(?? ??) ?? ?????.
    ?? ?? - ??;
  } ? ?? {
    // ?? ?? ??, ? ?? ??? maxOffset?? ?? ?? - maxOffset?? ????.
    //? ???? ????? ????? maxOffset ??? ?????.
    // ??? maxOffset?? ???? ????.
    // ?? ?? length=10, maxOffset=3, currentIndex=0, index=4, 5, 6???.
    // diff = 4, 5, 6. ? ? ? ?? ?? ?? ? ??? ???? ???? maxOffset(3)? ?????.
    maxOffset? ?????.
  }
}

?? ? ??

length = 10 ? maxOffset = 3? ???? ???? ??? ??? ?????.

 // currentIndex = 0, ?? = 10, maxOffset = 3??? ?????.

//?? ???? 0???.
console.log(getOffset(0, 0, 10, 3)); // ??: 0

// ?? ???? ?? ?? ????. console.log(getOffset(0, 1, 10, 3)); // ??: 1
console.log(getOffset(0, 2, 10, 3)); // ??: 2
console.log(getOffset(0, 3, 10, 3)); // ??: 3

// ??? ???? ??? ???? maxOffset(3)?? ????.
console.log(getOffset(0, 4, 10, 3)); // ??: 3
console.log(getOffset(0, 5, 10, 3)); // ??: 3
console.log(getOffset(0, 6, 10, 3)); // ??: 3

// ??? ???? ?? ?? ????(??? ?? ???).
// ??? = 7? 0 - 3? ????(??).
console.log(getOffset(0, 7, 10, 3)); // ??: -3
// ??? = 8? 0 - 2? ????(??).
console.log(getOffset(0, 8, 10, 3)); // ??: -2
// ??? = 9? 0 - 1? ????(??).
console.log(getOffset(0, 9, 10, 3)); // ??: -1

//?? ??? ??
console.log(getOffset(5, 8, 10, 3)); // ?? ???=5, ???=8. diff = (8-5 10) = 3. ??: 3
console.log(getOffset(5, 2, 10, 3)); // ?? ???=5, ???=2. diff = (2-5 10) = 7. length-maxOffset = 7. 7 >= 7? ?????. 7-10 = -3? ?????. ??: -3

?? ?? ? ??

1. ???? maxOffset ?? ???: ???? ??? maxOffset? ????? ????? ?? ????? ??? ?? ?? ?? ??? ?? ??? ? ????.
2. ??? ???: diff? ??? ? (index - currentIndex ??) ??? ?????. index - currentIndex ??? ??? ???? ???? ??? ?? ??? ?? ? ???? diff? ?? ?? ??? ?? ?? [0, ??-1] ?? ?? ??? ?????.
3. ??? ??: ???? ??? ??? ??? ???? ???? ??? ?? ?? ? ?? ?? ??? ? ?? ?? ??? ??? ???? ??? ???? ???? ??????.
4. ?? ????: ? ?? ??? ???????? ??? ?? ??? ?? ??? ???? ?? ????? ?? ?????(?? ?? ??? ???? ??? ??? ??? ? ?? ????).

??? ??? ???? ?? ???? ???? ??? ??? ???? ??? ?? ???? ???? ???? ??? ? ???, ? ??? ??? ??? ??? ?? ???? ???? ?? ?? ? ????.

? ??? ?? ???? ???? ?? ?? ??? ????? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!