I have set up an owl carousel on my page with a customized arrow positioned next to the slider. Currently, it looks like this:
https://i.stack.imgur.com/gCfM0.png
My goal is to vertically align the arrows and make sure the left arrow is aligned to the left while the right arrow is aligned to the right. I would also like this alignment to be responsive but I'm not sure how to achieve that. Can you assist me with this?
Below is the code I am using:
<div class="container-fluid">
<div class="col-sm-1" style="border: 1px solid #ccc">
<div class="owl-carousel-arrows">
<div class="prev">
<img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-left.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-10">
<div class="owl-carousel">
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant1.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant2.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant3.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant4.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant5.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant6.jpg"></div>
<div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant7.jpg"></div>
</div>
</div>
<div class="col-sm-1" style="border: 1px solid #ccc">
<div class="owl-carousel-arrows">
<div class="next">
<img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-right.png" class="img-responsive" />
</div>
</div>
</div>
</div>
Any suggestions on how I can achieve this alignment effectively and responsively would be greatly appreciated.