CSS – Как разместить стрелки слайдера за пределами слайдера, занимающего 12 строк столбцов ⇐ CSS

[Anonymous]

Я использую слайдер Swiper и хотел бы, чтобы стрелки навигации находились за пределами слайдера. По сути, я хотел бы сделать то же самое, что и на сайте airbnb, где слайдер с изображениями занимает целую строку из 12 столбцов, но стрелки находятся за его пределами.
Я использую фреймворк Bootstrap Twitter CSS и пробовал разные вещи, но ничего не помогло, и я не знаю, как этого добиться?

Css такой:

.swiper-container {
margin-top: 50px;
position: relative;
}

.arrow-left {
position: absolute;
top: 50%;
left: 0;
}

.arrow-right {
position: absolute;
top: 50%;
right: 0;
}


Html выглядит следующим образом:





@foreach($videos as $video)


id }}/video/{{ $video->id }}">getThumbnail() }}"/>






{{ $video->created_at->diffForHumans() }}



@if($video->title != '')
{{ $video->title }}
@else
Untitled
@endif




@endforeach







А это скрипт:

var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};

$(document).ready(function () {
carousel();
});


Подробнее здесь: https://stackoverflow.com/questions/418 ... -12-column