I am currently using a bootstrap carousel with the following code:
<div class="slider-main-container d-block">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
//@for (int i = 1; i <= Model.Sliders.Count - 1; i++)
//{
<li data-target="#carouselExampleIndicators" data-slide-to="@i"></li>
//}
</ol>
<div class="carousel-inner">
//@foreach (var item in Model.Sliders)
//{
if (_sliderCount == 1) {
<div class="carousel-item active">
<a href="@item.Link">
<img src="~/@item.Src" class="d-block w-100">
</a>
</div>
} else {
<div class="carousel-item">
<a href="@item.Link">
<img src="~/@item.Src" class="d-block w-100" alt="...">
</a>
</div>
}
_sliderCount++;
//}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
This code snippet generates a carousel with next and previous buttons within the images. However, I would like to have the next and previous buttons placed outside of the images like this: https://i.sstatic.net/sEHFH.jpg
Is there a way to achieve this layout?