Вот код, который нужно добавить/изменить уже имеющийся

let count;

document.querySelectorAll(".slider__item").forEach((item) => {
  item.addEventListener("click", (event) => {
    const currentItem = event.target.closest(".slider__item");

    count = currentItem.dataset.slickIndex; // Новая строка
    currentItem.classList.toggle("opened");
    removeClasses(currentItem);
  });
});

document.addEventListener("keydown", (e) => {
  if (count === undefined) return;

  if (e.key === 'ArrowLeft') {
    const currentSlide = document.querySelector(`[data-slick-index='${count}']`);
    const nextSlide = document.querySelector(`[data-slick-index='${+count - 1}']`);

    currentSlide.classList.remove("opened");
    nextSlide.classList.add('opened')

    count--;

  } else if (e.key === 'ArrowRight') {
      const currentSlide = document.querySelector(`[data-slick-index='${count}']`);
      const nextSlide = document.querySelector(`[data-slick-index='${+count + 1}']`);

      currentSlide.classList.remove("opened");
      nextSlide.classList.add('opened')

      count++;
  }
});

Создали переменную count, теперь при клике по какому-либо слайду в неё записывается порядковый номер кликнутого слайда. Дальше на документе лежит обработчик события keydown. В его двух условиях повторяющаяся логика, которую можно уместить в одну функцию и дальше уже вызывать с каким-либо аргументом, но у меня не вышло, потому что в сборке аргументы функции неожиданно трактуются как нечто совсем отличное от переданного аргумента.

const setTotalUnit = () => {
  const total = document.querySelector(".totelunit");
  const units = document.querySelectorAll(".unit");
  let sum = 0;

  units.forEach(item => {
    sum += +item.innerHTML;
  })

  total.innerHTML = sum;
}

Может, потому что тег label не закрыл? 2 открывающих тега

То есть вы заранее знаете, какую разметку нужно скопировать в новый div блок?
Тогда, предположим, такую структуру:

<div class="container">
<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
</div>

Теперь nav находится в container. Далее, с помощью js создаем в этом же контейнере, но после закрывающего тега nav, новый div.

const container = document.querySelector('.container');

container.insertAdjacentHTML('beforeend', `<div>ТУТ ВАШ СПИСОК</div>`)