leeroyjenkins176

Как бы попробовал сделать я:
1) Для навигации по слайдам кликами/свайпом взять хоть тот же swiper. Включить эффект "fade", чтобы слайды лежали в стопке. Отключить transtion для opacity и вместо него сделать transition-property: visibility. Это даст необходимую задержку для будущей анимации появления/исчезновения текста.
2) Сама анимация текста и полосок к слайдеру никакого отношения не имеет. Такой эффект можно сделать с помощью @keyframes
3) Когда анимация готова, активируем её с помощю активного класса который навешивает свайпер на слайды по мере прокрутки.

let ulEl
let list = ["Мастер и Маргарита", "Гарри Поттер", "За пропастью во лжи", "Властелин колец", "Дюна", "Отцы и дети"]

const Header = document.createElement('h1');
Header.textContent = 'Домашняя библиотека'
document.body.append(Header)

const Addbutton = document.createElement('button');
Addbutton.textContent = 'Добавить книгу'
document.body.append(Addbutton)

const Searchbutton = document.createElement('button');
Searchbutton.textContent = 'Найти'
document.body.append(Searchbutton)

function newlist() {
  ulEl = document.createElement('ol');
  document.body.append(ulEl)
  updateList()
}

function updateList() {
  ulEl.innerHTML = list.map(v => `<li>${v}</li>`).join('')
}

function Adding() {
  list.push(prompt('Введите название книги'))
  updateList()
}

newlist(list)

Addbutton.onclick = Adding

const links = {
	36624938042: 'https://marketing-parsing3.tilda.ws/im/tproduct/368371303452-radialnie-opravki-levie-korotkie-vdi-b3',
	48534127142: 'https://marketing-parsing3.tilda.ws/im/tproduct/579863714382-blok-privodnoi-radialnii-vdi40-5480-er32'
}

const searchParams = new URLSearchParams(location.search)
const utm = searchParams.get('utm_term')

if(utm && links.hasOwnProperty(utm)) {
	location.href = links[utm]
}

Как написать скрипт для получения данных именно с гугл-таблицы придется разбираться самостоятельно

Попробуйте на время тестов указать для всех элементов системный шрифт, уже после этого можно будет копать дальше.

Для пропорционального уменьшения - aspect-ratio. Если браузерная поддержка не позволяет, то посмотрите, как реализован класс .ratio в бутстрапе.
А для уменьшения блока относительно ширины используйте width и max-width вместе
.el {width: 500px; max-width: 100%}

C помощью параметров при инициализации свайпера

// Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

Либо с помощью методов

const swiper = new Swiper('.swiper', {
// ...
})

document.querySelectorAll('.my-swiper-btn').forEach(btn => {
btn.addEventListener('click', swiper.slideNext)
})