1

Хочу сделать простую карусель: есть контейнер, есть его содержимое обернутое в свой контейнер, который я и хочу двигать по горизонтали с помощью JavaScript.

Но, слайды все равно переносятся на другую строку, когда упираются в контейнер.

CSS карусели:

.slider {
    border: 2px solid black;
    background: gray;
    color: black;
    position: relative;
    width: 500px;
    height: 200px;
    overflow: hidden; /*Прячем что вылезло */
}

CSS слайдов:

.slider .texts{    
    position: absolute;
    display: inline-block;
    width:  auto; /* По идее должен растягиваться от содержимого */
    height: 200px; 
}

.slider .texts li{
    list-style-type: none;
    /* Размеры слайда */
    height: 200px;
    width: 300px;
    display: inline-block;
}

HTML:

<div class="slider" id="slider">
    <ul class="texts" id="texts">

            <li>Первый</li>
            <li>Второй</li>
            <li>Третий</li>
    </ul> 
</div>

1 ответ 1

2

Нужно запретить им перенос .slider .texts {white-space: nowrap}

2
  • Большое спасибо. Но почему так происходит? Потому что позиционирование абсолютно-относительное? То есть внутренний элемент воспринимает контейнер как окно браузера? Плюс таковы правила для строчных элементов?
    – Yes Man
    3 фев 2017 в 16:25
  • Позиционирование не причем - у вас непосредственно слайды не спозиционированы, только контейнер для слайдов имеет позиционирование. Строчные элементы переносятся если не хватает места, вот и все. 3 фев 2017 в 16:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.