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

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

[User Unknown]

ul.slides
  display: block
  width: 9999px /* или сума всех ширин + отступы */
  height: 100%

.slide
  float: left
  width: 100vw
  height: 100%
  display: block


/*Flex*/
.slides
  display: flex
  width: 100%
  height:  100%
.slide
  flex: 0 0 100%
  height: 100%
  display: block

Comments

[Кирилл]

А перемотка будет работать? Чтобы был именно эффект "перематывания" влево вправо.

[User Unknown]

нет

[User Unknown]

Кирилл: обновил, если что

[Кирилл]

AndrewN1: .slide принимают ширину .slides. Т.е., тоже 9999px.

[User Unknown]

Кирилл: для slide поставь тогда width: 100vw

[Кирилл]

AndrewN1: с vw заработало. Но насколько кроссбраузерен vw ? Он везде работает?

[User Unknown]

https://caniuse.com/#search=vw

[User Unknown]

можно все на флексах переписать

[Кирилл]

AndrewN1: попробовал li.slide представить как flex-inline, но та же проблема. Тут тоже нужно vw

[Кирилл]

AndrewN1: Спасибо большое!!! Сработало на флексах.

[ⓒⓢⓢ]

Или в вашем варианте у ul.slides заменить стиль display: inline-block; на block;
https://jsfiddle.net/0zvdz9ye/2/

[Кирилл]

JRK_DV: Тоже работает. Спасибо! Напиши как ответ, отмечу решением :-)

Answer 2

[ⓒⓢⓢ]

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