Как задать ширину слайдам такую же, как у окна браузера?

Question

[Кирилл]

Решил поставить обычный слайдер-фотогалерею на страницу. Вид её стандартный — стрелки влево/вправо, точки для перехода на нужный слайд и сами слайды. При переходе на нужный слайд выполняется "перемотка" до нужного слайда. Например, как тут.

Возник следующий нюанс.

Html-структура слайдера-фотогалереи следующая:

<div class="frame">
    <ul class="slides">
        <li class="slide">Содержимое слайда 1</li>
        <li class="slide">Содержимое слайда 2</li>
        <li class="slide">Содержимое слайда 3</li>
    </ul>
</div>

где .frame — область "просмотра", ul.slides — длиннющая последовательность слайдов, li.slide — слайд. Причём, ясно, что у .frame есть CSS-свойство overflow: hidden, чтобы слайды были видны только в области "просмотра".

Примерный CSS такой:

.frame {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

ul.slides {
    position: relative;
    display: inline-block;

    li.slide {
        position: relative;
        display: inline-block;
    }
}

Причем, скажу сразу, что .frame автоматически принимает ширину, как у окна браузера, когда я меняю размер окна браузера. А теперь вопрос.

Как сделать так, чтобы li.slide автоматически принимал ширину, как у блока .frame без JavaScript ? Т.е., чтобы при открытии web-странички все слайды li.slide принимали ширину, как у окна браузера? Расширяю окно браузера, и все слайды li.slide автоматом меняют ширину. Можно ли сделать только средствами CSS ?

Спасибо !

Answer 1

[ⓒⓢⓢ]

Для ul.slides, li.slide
добавить width: inherit; height: inherit;
И убрать отступы
https://jsfiddle.net/0zvdz9ye/3/