How to position element dynamically?-CodePudding

Would it be possible to pick an element from one flow and place it in a different flow and make it behave as a part of that flow?

.carousal-arrows {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.carousel-bullets {
  display: flex;
  pointer-events: none;
  list-style-type: none;
  position: absolute;
  top: 0px;
  background-color: red;
  width: 100px;
}

.carousel-bullets .carousel-bullet {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-inline: 4px;
}

<div >
  <button>&#5176;</button>
  <button>&#5171;</button>
</div>
<ul >
  <li ></li>
  <li ></li>
  <li ></li>
  <li ></li>
</ul>

Using the above scss I placed the carousal-bullets class element between the arrow buttons.

I have to manually specify the width of the container to accommodate the bullets div, would it be possible to dynamically update the width such that when the bullets in the container increase the width of the container should adjust accordingly and bullets will not layover the arrows.

Need to follow the same HTML structure as mentioned above.

CodePudding user response：

may this will help you.

      .carousal-arrows {
            width: 100%;
            display: flex;
            justify-content: space-between;
            position:absolute;

        }

        .carousel-bullets {
            display: flex;
            pointer-events: none;
            list-style-type: none;
            background-color: red;
            margin: 10px 0;
        }

        .carousel-bullets .carousel-bullet {
            width: 6px;
            height: 6px;
            background-color: #000;
            border-radius: 50%;
            margin-inline: 4px;
        }

        .box {
            display: inline-block;
            width: fit-content;
            position: relative;
        }

  <div >

        <div >
            <button >&#5176;</button>
            <button >&#5171;</button>
        </div>

        <ul >
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
        </ul>

    </div>

CodePudding user response：

This could be easily done if you just restructure the ul elements between the buttons and set the position as relative. However there is a limit to the number of carousel-bullet that can be fit inside the buttons due to the fixed width of carousal-arrows.

.carousal-arrows {
  width: 200px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.carousel-bullets {
  padding-right: 3px;
  padding-left: 3px;
  display: flex;
  pointer-events: none;
  list-style-type: none;
  position: relative;
  top: 0px;
  background-color: red;
  width: 100%;
  justify-content: center;
  flex-direction: row;
}

.carousel-bullets .carousel-bullet {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 4px;
  margin-left: 4px;
}

<div >
  <button>&#5176;</button>
  <ul >
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    <li ></li>
    
    
  </ul>
  <button>&#5171;</button>
</div>