Настройки компонента Flex Direction

Question

Я новичок в CSS и HTML дизайне.Я использую flex в своем дизайне начальной загрузки.Я установил flex для сортировки компонентов слева направо.Как и на этом сайте.

Я хочу сжать ползунок вправо и разместить другой компонент слева .Я попытался удалить эту строку над # GrandCarousel .

element.style {
    /* left: -396.5px; */
}

как мне сделать эту функцию

Answer 1

Создайте два div внутри div #GrandCarousel. Давайте назовем их левый и правый раздел. Дайте им width: 50%; Поместите все текущее содержимое #GrandCarousel div в правый раздел. После этого у вас могут возникнуть проблемы с выравниванием изображения внутри слайдера. Вы должны будете настроить их в соответствии с тем, как они вам нужны. Ниже приведен HTML-код, чтобы лучше понять.

HTML

 <div id="GrandCarousel" class="banner-container">
    <div class="left-section">

         // Left section contents

    </div>
    <div class="right=section">
        // Move GrandCarousel contents to here
    </div>
 </div>

CSS

 .banner-container {
     display: flex;
 }

 .left-section,
 .right-section {
     width: 50vw;
 }

 .right-section {
     position: relative; // To contain all carousel contents inside right-section
 }