ArtJH

Все есть у них в документации, и конкретно такой случай тоже описан и даже пример приведен)
https://codepen.io/fancyapps/pen/NLQZBr?editors=1010

проблема в том, что ты не сбрасываешь состояние инвалидности, у тебя срабатывает oninvalid когда что-то не так, а когда все верно никакого хэндлера нет
грубо говоря нужно что-то похожее на onvalid

А поддержка каких браузеров запланирована на вашем проекте? Ответите на этот вопрос, думаю ответите и на свой.

Слайдер

- https://owlcarousel2.github.io/OwlCarousel2/

При нажатии на слайд, увеличивалась картинка

- https://photoswipe.com/

2 отдельных скрипта, один для слайдера (например, swiper), второй для лайтбокса с галереей (например, fancybox).

<div class="swiper-container">
  <!-- блок слайдера-->
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a href="image1.jpg" class="lightbox">
        <!-- на ссылку вешаем скрипт лайтбокса -->
        <img src="thumbnail1.jpg" alt="">
      </a>
    </div>
    <div class="swiper-slide">
      <a href="image2.jpg" class="lightbox">
        <img src="thumbnail2.jpg" alt="">
      </a>
    </div>
  </div>
</div>

Можете использовать SimpleBar

Ближе к закрывающему тэгу body

Возможно ли как-нибудь защитить верстку, но и при этом чтоб сайт находился на хостинге, чтоб клиент мог потыкать посмотреть?

Самый простой вариант- это привязать исполнение скриптов к домену. Это, конечно, никакая не защита, но при данной постановке задачи и не может быть 100% защиты, но от недалекого воришки спасёт.

Иным вариантом может быть воздействие на нехорошего человека путём встройки некой приколюхи, которая через время, в случае неуплаты, проявит себя. Будь то просто "изчезновение" сайта, либо же надпись на странице о том, какой он мудила. Опять же, не защита, и требует дополнительных усилий, но в некоторых случаях сыграет вам на руку.

А вообще с мудаками, действительно, не стоит водить дел. Но этот опыт приобретается только лишь самолично.

Вот еще вариант. запускаете сайт локально, и через тимвювер или аналоги предоставляете доступ к рабочему столу.

единственный надёжный вариант - слать скриншоты низкого качества.
всё остальное не спасет от ушлых.

а вообще, есть золотое правило: "не работать с мудаками". правда вырабатывается оно не сразу.

Думаю это то, что вам нужно

Там весь трюк в использовании position: sticky и привязке прокрутки слайдера к скоролу.

https://www.cssscript.com/tag/scroll-animation/

Смотрите демки, выбирайте какой душе угодно.
Такое можно найти если не быть забаненым в гугле за 10 секунд.
Удивительно, но ищется по запросу : scroll content animation