dualdeazz

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const users = [
  {
    id: 1,
    firstName: 'John',
    lastName: 'Doe',
    age: 27
  },
  {
    id: 2,
    firstName: 'Emily',
    lastName: 'Green',
    age: 29
  }
];

const Home = () => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
        </li>
      ))}
    </ul>
  );
};

const User = () => {
  const params = useParams();
  const id = parseInt(params.id);
  const user = users.find((entry) => entry.id === id);
  if (user === undefined) {
    return <p>User not found</p>;
  }

  return (
    <>
      <ul>
        <li><storng>Firstname</storng>: {user.firstName}</li>
        <li><storng>Lastname</storng>: {user.lastName}</li>
        <li><storng>Age</storng>: {user.age}</li>
      </ul>
      <Link to="/">Go back</Link>
    </>
  );
};

const root = createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <Routes>
      <Route index element={<Home />} />
      <Route path=":id" element={<User />} />
    </Routes>
  </BrowserRouter>
);

https://reactrouter.com/

Вы вызываете функцию в момент создания таймера, а не после его срабатывания. Видимо, в этот момент в DOM нет элементов с селектором .option-item .option-link
Попробуйте так:

setTimeout(
  () => { sliderChange(document.querySelectorAll('.swiper-slide img')); },
  500
);

Но лучше привязаться к какому-то событию. Например, к окончанию загрузки страницы или к появлению нужного элемента (через MutationObserver).

- setTimeout(sliderChange(document.querySelectorAll('.swiper-slide img')),500);
+ setTimeout(() => sliderChange(document.querySelectorAll('.swiper-slide img')),500);

Вместо точки используй скобки и все будет работать.

const rome = (number) => {
  const object = {
    x: 10, 
    xv: 15,
  };
  return object[number];
}

Всё не так.
split разбивает строку и результатом будет массив строк. Соответственно, условие typeof arr[i] === 'number' никогда не выполнится.
Условие записано неверно и всегда будет давать true.
typeof arr[i] === 'number' & arr.length === 4 || 6эквивалентно

((typeof arr[i] === 'number') & (arr.length === 4)) || 6

& - это не логическое И, а побитовое.
forEach у вас смысла не имеет, так как он не использует значение, возвращаемое из каллбэк-функции.
В основной функции нет return'а, значит она всегда возвращает undefined.
Ну и regex'а тут нет.

Можно, через iframe
Пример

Само видео добавляйте в основной слайдер, в thumbs лучше добавить скриншот из видео иначе оно просто по клику на миниатюру будет воспроизводиться и смены слайда не будет. Как вариант можно поверх миниатуры повесить какой-то прозрачный блок чтобы клик тригерился уже по нему и не по самому плееру.