sejunctus

Кажется, теперь то, что нужно! Спасибо огромное за помощь!

Проценты не годятся, т.к. ширина берется от родительского блока, а в карусели он - это сумма всех изображений. 7680 пкс - 20% это 1536 пкс. Картинки через background, чтобы использовать свойство background-size: cover, в противном случае блок будет подстраиваться по высоте либо, что еще хуже, изображения будут вытягиваться (у нас же height: 100%). Может, вы знаете скрипт карусели попроще? Без таких наворотов?

Пропишем у боковушек при ширине 1920 пкс ширину 375пкс [ ( 1920-1170 ) / 2 ]. Но если мы начнем увеличивать ширину экрана, то соседние картинки начнут наезжать на эти.

Странно, вроде там 3 active стоит. Проблема как раз в том, что непонятно, какие размеры прописывать у боковых картинок. Вот смотрите: при разрешении в 1920 пкс скрипт делит всю ширину поровну между слайдами и всем прописывает 512 пкс. При разрешении в 1920 мне нужно центральный слайд сделать шириной 1170 пкс. Что прописать у боковушек? Прописывать нужно конкретную ширину, дабы перебить inline стиль. В идеале было бы найти в скрипте функцию, которая делит ширину экрана поровну между всеми слайдами. Но скрипт огромный, с кучей функций, а я в js не очень силен.

Спасибо! Вроде получилось: http://steiner-glass.tmweb.ru/01/ Но теперь другая загвоздка: нужно центральное изображение сделать шире 2 других, а их напротив, ужать по бокам. Карусель owl-carousel. Может, есть какой-нибудь способ? Через css криво как-то выходит...

Вот что получается (разрешение - 1920*1200 пкс). Нужно избавиться от белого зазора между каруселью и футером. Если растянуть картинки по высоте до 100% и ширину поставить auto, то пропадает футер. Про 100vh не очень понял, что вы имеете в виду. Скрипт или calc()? Flexbox не совсем кроссбраузерно получится. А что, если перебрать через медиа-запросы все возможные варианты высоты экрана? И под эти разрешения подгонять высоту. Правда, получится довольно топорно и громоздко, особенно учитывая широкое разнообразие разрешений. По идее, должен же быть более красивый способ

В том то и дело, что не просто "тупо карусельку". Футер должен быть прижат книзу. Прижимаем футер - при уменьшии окна браузера появляется зазор между каруселькой и самим футером. А нужно, что это все вместе красиво адаптировалось. Знаете, как в случае с background-size: cover, когда уменьшаешь окно, и фон уменьшается пропорционально.

Не совсем. Есть прокрутка вертикальная. А в ТЗ сказано - никаких прокруток при любых разрешениях. Попробовал погуглить разметку "святой грааль" (holy grail layout). Понравился вариант https://htmlacademy.ru/blog/29 Только пока не могу придумать, как это использовать в случае с каруселью.

Очень нужна помощь опытных верстальщиков. Визуально ТЗ на картинке. Требования следующие: 1) футер прижат книзу 2) фоновый слайдер-карусель (выглядит именно так, по бокам предыдущая и следующая фотографии чуть затемненные) 3) полностью адаптивный, другими словами не должно быть ни горизонтальной, ни вертикальной прокрутки при любых разрешениях экрана 4) контент расположен в блоке поверх карусели 5) все это должно работать на CMS Joomla Я уже чего только не пробовал. Универсального решения не нашел. Фиксишь футер, остается пространство между каруселью и футером. Подгонять по высоте и прописывать стили для всех типов разрешений... Вряд ли оптимальный способ. На ум приходит использовать карусель, чтобы картинки были фоновыми и использовать background-size: cover, но вот не придумал как это осуществить. Высоту хедера и футера можно зафиксить (100 пкс) В общем, очень надеюсь на помощь. Думаю, данная задачка будет интересна многим. Вряд ли такие сайты попадаются на каждом шагу. (хотя, может есть примеры?)