HamSter

body, html, div { height: 100vh; }
||
body, html, div { height: 100%; }

gulp-uncss
npm uncss

вот такой пример

Но советую все же сделать фоновым изображение все для кнопки, чтобы не было проблем с браузером.

table { display: block; }

+ адаптируйте изображения.
У Вас просто все не влазит! Ячейка с изображением больше 1000px, таблица сама высчитывает ширину по содержимому.
Задавайте ширину таким ячейкам.

P.S:Нужно приводить ссылку на код, а не фото. Тут тоже не Ванги сидят же)))

slidesToScroll: 1 - тогда перелистывание работает нормально, но и через swipe уже нельзя листать больше 1 слайда
а если к примеру поставить slidesToScroll: 9

Вопрос не совсем понятен.
У первого слайдера добавила ширину хотя бы 120px - свип заработал. Попробуйте выровнять как-то первый слайдер, чтобы и стрелочки были в поле видимости.

если стрелками влево долистать до 1 слайда и листать дальше, то слайд показывает последний

Для первого слайдера infinite: true по-умолчанию, поэтому на первом еще пролистывается с первого на последйний, а на втором соответственно нет. Решение: для первого слайдера задать infinite: false, либо для обоих infinite: true

например так.

С flex примерно так можно

на быструю руку так можно.

Но все же я советую фоновым изображением делать.

Например slick.
В параметрах задать
- вертикальную прокрутку vertical: true
- бесконечную прокрутку infinite: true
- и оставить одну стрелочку (вторую скрыть)

Какой принцип работы должен быть у слайдера?
Больше на табы похоже!

Да, можно и не такой можно!
Как - это уже задание!

Прилипающее меню

пример

Обычный слайдер и dots из svg (то что в центре)

scrollmagic в помощь

В svg сделать или relative+absolute.

Чек-лист вёрстки. Что можно отдавать клиенту, а чт...

Задать им одинаковую высоту!

Иного решения нет!

изображение + паттерн из клеточек, берутся 2x2 клеточки и дублируются по X & Y