Очень плохо сверстано. Не нужно использовать width. Вот примерно так - https://jsfiddle.net/fu7d2ohe/ Но нужно доработать, чтобы не съезжало по ширине(это уже медиа-запросы)
Сделать это достаточно легко, просто вешаешь много обработчиков на изменения типа/цвета/размера и в зависимости от совокупностей подставляешь картинку. А слайдер, да, можно взять любой, например kenwheeler.github.io/slick
Можно сделать это при помощи JS. Повесить обработчик onscroll и если юзер проскроллил больше чем определенное пространство, то делать header'у transform: translateY()