Как разместить текст рядом с изображением карусели

Question

Привет, ребята. Я пытаюсь создать карусель изображений на полстраницы, а справа от изображения - карусель. Я пытаюсь поместить абзац с текстом. Вот мой код

Карусель

<section id="domov">    
      <div id="Slider" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
          <li data-target="#Slider" data-slide-to="0" class="active"></li>
          <li data-target="#Slider" data-slide-to="1"></li>
          <li data-target="#Slider" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="Slike/SpaceHippie3.jpg" alt="SpaceHippie">
              </div>
              <div class="item">
                <img src="slike/SpaceHippie4.jpg" alt="SpaceHippie">
              </div>
              <div class="item">
                <img src="slike/SpaceHippie5.jpg" alt="SpaceHippie">
              </div>
              <h1 id="Text1">TEST</h1>
        </div>
      </div>
</section>

CSS

#domov{
   width: 48%;
   padding-left: 50px;
   display: flex;
   position: sticky;
   float: left;
}

#text1{
   float: right;
}

Answer 1

Ваш код должен быть таким:

<section id="domov">
    <div id="Slider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#Slider" data-slide-to="0" class="active"></li>
            <li data-target="#Slider" data-slide-to="1"></li>
            <li data-target="#Slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="Slike/SpaceHippie3.jpg" alt="SpaceHippie">
            </div>
            <div class="item">
                <img src="slike/SpaceHippie4.jpg" alt="SpaceHippie">
            </div>
            <div class="item">
                <img src="slike/SpaceHippie5.jpg" alt="SpaceHippie">
            </div>
        </div>
    </div>
    <h1 id="Text1">TEST</h1>
</section>

<style>
    #domov{
        width: 100%;
        display: flex;
        position: sticky;
    }
    #Slider {
        width: 50%;
        /* custom styling for your carousel */
    }
    #text1{
        width: 50%;
        text-align: center;
    }
</style>