I use this carousel and love it: https://mdbootstrap.com/snippets/jquery/ascensus/135508#html-tab-view
The only thing is, I want the control to be around the indicators.
Currently, it's like this:
< >
SLIDE SLIDE SLIDE
...
What I want:
SLIDE SLIDE SLIDE
< ... >
already tried:
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
Anyone knows how I can achieve this with bootstrap classes without any wild css?
Changing the enclosing div of the carousel to a flex, changing the flex-order, and managing the extra margins did it.
The code becomes:
<div id="multi-item-example" class="carousel slide carousel-multi-item d-flex align-items-center justify-content-center flex-column" data-ride="carousel">
<div class="controls-top order-1 d-flex">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<ol class="carousel-indicators my-0 mx-5 position-relative d-flex align-items-center">
<li data-target="#multi-item-example" data-slide-to="0" class="active m-0 mr-2"></li>
<li data-target="#multi-item-example" data-slide-to="1" class="m-0 mr-2"></li>
<li data-target="#multi-item-example" data-slide-to="2" class="m-0 mr-2"></li>
</ol>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="carousel-inner" role="listbox">
// carousel images and stuff
</div>
</div>
Refer here: Snippet