Turn MyBookTable shortcode results into carousel

carousel.js

(function () {
  'use strict';
  if (window.innerWidth >= 1024) {
    const bookSet = document.getElementsByClassName('mbt-book-archive-books')[0];
    const books = bookSet.getElementsByClassName('mbt-book');
    var bookList = [];

    //convert books to array called bookList
    for (let i = 0; i < books.length; i++) {
      bookList.push(books[i]);
    }

    const diff = bookList.length - 7;
    let it = 0;

    const bookSection = document.querySelector('.book-set .wrap');

    bookList.map((book) => {
      book.style.left = 0;
    });

    const carousel = () => {
      if (diff > it) {
        for (let i = 0; i < bookList.length; i++) {
          let pos = parseInt(bookList[i].style.left);
          bookList[i].style.left = (pos - 149) + 'px';
        }

        it++;
      } else if (diff === it) {
        for (let j = 0; j < bookList.length; j++) {
          bookList[j].style.left = 0;
        }

        it = 0;
      }

    };

    setInterval(carousel, 3500);

    const prev = () => {
      if (diff >= it && it > 0) {
        for (let i = 0; i < bookList.length; i++) {
          let pos = parseInt(bookList[i].style.left);
          bookList[i].style.left = (pos + 149) + 'px';
        }

        it--;
      }
    };

    const next = () => {
      if (diff > it) {
        for (let i = 0; i < bookList.length; i++) {
          let pos = parseInt(bookList[i].style.left);
          bookList[i].style.left = (pos - 149) + 'px';
        }

        it++;
      }

    };

    const createNav = () => {
      var leftArr = document.createElement('div');
      leftArr.setAttribute('id', 'leftArr');
      var rightArr = document.createElement('div');
      rightArr.setAttribute('id', 'rightArr');
      leftArr.addEventListener('click', prev);
      rightArr.addEventListener('click', next);
      bookSection.appendChild(leftArr);
      bookSection.appendChild(rightArr);
    };

    window.addEventListener('load', createNav);
  }
})();