swiperのスライダーの矢印を画像の外に出したいです。

前提・実現したいこと

swiperの画像自体は三枚表示のままスライダーの矢印を画像の外に出したいです。
swiper-parentにposition: relativeをかけ、
swiper-containerからボタンの入るサイズを引いてみたのですが、矢印が外に出ないでいます。
どこかに追記、あるいは誤っている部分があれば教えていただけると幸いです。

html、js

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">

<!--スライダー-->
<link rel="stylesheet" href="swiper/css/swiper-bundle.min.css">
<link rel="stylesheet" href="swiper/css/common2.css">
</head>

<body>
<!--スライダーここから-->
<div class="swiper-parent">
<div class="swiper-container">
  <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#" target="_top"><img src="1.jpg"></a></div>
    <div class="swiper-slide"><a href="#" target="_top"><img src="2.jpg"></a></div>
  </div>
</div>

<!--矢印-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!--矢印ここまで--> 
</div>

<!--スライダー-->
<script src="swiper/js/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
	autoHeight: true,
	freeMode: true,/*好きな位置までスワイプ*/
	spaceBetween: 5,/*画像同士の間隔-*/
	slidesPerView: 3,/*スマホ向け　表示枚数*/
	breakpoints: {
		430: {
			slidesPerView: 6,
		},
		768: {/*pc向け　表示枚数*/
	        slidesPerView: 6,
		},

	},
	
	autoplay: { /*オートプレー-*/
		delay: 4000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	loop: true, /*ループ-*/
	navigation: {
		nextEl: '.swiper-button-next', /*矢印次*/
		prevEl: '.swiper-button-prev', /*矢印前*/
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});	
	

</script> 
<!--スライダーここまで-->

</body>
</html>

css


* {
    margin: 0;
    padding: 0;
  }


.swiper-parent {
	position: relative;
}

  .swiper-slide {
    width: 100%;
	height: auto;
	box-sizing: border-box;
}
  .swiper-slide img {
    width: 100%;
    height: auto;
  }

.swiper-container{
	  max-height:140px!important;
	  margin:0!important;
	 width: calc(100% - 100px);
	box-sizing: content-box;
  }

.swiper-button-prev,
.swiper-button-next {
	width: 48px; /* ボタンの幅 */
	height: 48px; /* ボタンの高さ */
	background-size: 48px 48px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
	margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
	top: calc((100% - 50px) * 0.5);
}

.swiper-button-next {
	background-image: url(../img/nxt.png);
}
.swiper-button-prev {
	background-image: url(../img/pree.png);
}

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか？

css
1.swiper-container {
2  max-height: 140px !important;
3  /* margin: 0 !important; */
4  /* width: calc(100% - 100px); */
5  box-sizing: content-box;
6  margin: 0 58px;
7  overflow: hidden;
8}
9