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

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

Вот как нужно:
5d46f46b25d77610027744.jpeg

Как у меня:
5d46f4f2d7f81597228812.jpeg

Мой код:
<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;
}


И да, кто знает, как сделать текст поверх слайдера как на первой картинке, тоже напишите)
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
@IVENTEYE Автор вопроса
Проблему решил таким способом, думаю, не я первый и не я последний, кто столкнулся с такой проблемой, так что, пользуйтесь.
.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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
TTATPuOT
@TTATPuOT
https://patriotovsky.ru/
Лениво писать код, вот пример: https://freakyjolly.com/demo/jquery/OwlCarousel2/
Кнопки туда-сюда - это отдельные элементы. .owl-nav - это их враппер, а внутри там есть свои .nav-btn туда и обратно. Т.е. ещё два блока. Как раз таки .nav-btn и нужно позиционировать через position: absolute. Слева и справа.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы