When using the owl carousel, I encountered an issue where the arrows and dots are aligned at the same height. I would like to have the arrows centered vertically while keeping the dots at the bottom as they are currently positioned. However, whenever I attempt to style the arrows for center alignment, the dots also move along with them...
If anyone has a solution for this problem, I would greatly appreciate the help.
//////////////////////////////////////////////////////////////////// Details
https://i.sstatic.net/ZgRn2.jpg
$("#carousel-slider").owlCarousel({
navigation : true,
slideSpeed : 500,
paginationSpeed : 800,
rewindSpeed : 1000,
singleItem: true,
autoPlay : true,
stopOnHover : true,
pagination: true,
}); // CSS styling code goes here <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
**html**
<div id="container-navbar-carousel">
<div class="container-carousel">
<div id="carousel-slider" class="owl-carousel owl-theme">
<div class="slider wall-art" title="wall art"></div>
<div class="slider camera" title="camera"></div>
<div class="slider record-player" title="record player"></div>
</div>
</div>
</div>