Позиционирование кнопок навигации внутри слайдера (owl-carousel)?

Question

[Алексей Каратеев]

Здравсвуйте, сделал слайдер на сайте, только не пойму, как спозиционировать кнопки навигации внутри самого слайдера. Пробовал с помощью position: relative/absolute, но,видимо, я что-то не так делаю, помогите разобраться.

Вот как нужно:


Как у меня:


Мой код:

<section class="portfolio">
		<div id="slider__cintainer" class="owl-carousel">
			<div><img src="img/img1.png" alt="Works"></div>
			<div>
				<img src="img/img2.png" alt="Works">
			</div>
			<div><img src="img/img3.png" alt="Works"></div>
			<div><img src="img/img2.png" alt="Works"></div>
			<div><img src="img/img3.png" alt="Works"></div>
			<div><img src="img/img1.png" alt="Works"></div>
			<div><img src="img/img3.png" alt="Works"></div>
			<div><img src="img/img1.png" alt="Works"></div>
			<div><img src="img/img2.png" alt="Works"></div>
		</div>
		</div>
	</section>

.owl-carousel{
	position: relative;
}

.owl-nav{
	position: absolute;
	display: flex;
	justify-content: space-between;
}

И да, кто знает, как сделать текст поверх слайдера как на первой картинке, тоже напишите)

Answer 1

[Алексей Каратеев]

Проблему решил таким способом, думаю, не я первый и не я последний, кто столкнулся с такой проблемой, так что, пользуйтесь.

.owl-carousel .owl-stage-outer {
	position: relative;
}

 .owl-nav {
	position: absolute;
	width: 100%;
	height: 0px;
	top: 40%;
	z-index: 999;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
}

Comments

[VegasChickiChicki]

Что бы спозиционировать по центру вертикально при абсолютном позицинировании, можно сделать так:

top: 50%;
transform: translateY(-50%);

Answer 2

[Антон Неверов]

Лениво писать код, вот пример: https://freakyjolly.com/demo/jquery/OwlCarousel2/
Кнопки туда-сюда - это отдельные элементы. .owl-nav - это их враппер, а внутри там есть свои .nav-btn туда и обратно. Т.е. ещё два блока. Как раз таки .nav-btn и нужно позиционировать через position: absolute. Слева и справа.