How can I solve the following issue:
I am working with a carousel markup that has the same HTML structure as shown below.
<div>
// Contains the carousel slide
<div>
<ul>
<li><img src={....} /></li>
<li><img src={....} /></li>
<li><img src={....} /></li>
</ul>
</div>
// Container for arrows
<div class="carousel-arrows">
<button class="carousel-arrow"&gT; < </button> // left arrow
<button class="carousel-arrow"> > </button> // right arrow
</div>
// Container for pagination
<ul class="carousel_pagination">
<li></li>
<li></li>
<li></li>
<ul>
</div>
The library I'm using requires this specific HTML structure, making it difficult for me to position the ul (pagination bullets) between the left and right arrows.
My attempt at using the position property with absolute positioning did not achieve the desired result. I want the carousel-arrows width to be dynamic enough to adjust based on the number of bullets in the ul.
https://i.sstatic.net/7mABp.png
I need the carousel-arrow width to adjust itself when there are less pagination bullets and vice versa. Is there a way to accomplish this using SCSS?