【※画像有り】Swiperボタンを外側へ出したい

イメージ説明
【実現したいこと】画像のように、Swiperスライドのボタンを外側へ出したいです。

【現状】①ボタンそのものの大きさや幅は、CSSで'.swiper-button-next'　を使い変えることは出来た
②containerをrelative、'.swiper-button-next'にabsoluteを使いtop値から１０pxで指定した所、ボタンが消えて無くなった
③Qiitaや他サイトをくまなく調べたが、解決策をしらべられなかった

【Swiper】リンク内容プラグイン、公式サイト
何をどう足せば外側に出せるでしょうか？
以下のコードの状態で、画像のようなボタンが背景と被ってしまい、外にない状況です。

どんなに小さいこと、ヒントでも頂ければ幸いです。

どうかご教授よろしくお願いいたします。

以下HTML

javascript
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="utf-8">
6    <title>ttt</title>
7    
8    <link rel="stylesheet" href="big.css">
9    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
11    <style type="text/css">
12      .swiper-container {
13        height: 270px;
14        margin:20px 100px;
15    
16      }
17      
18      .swiper-slide {
19        padding-top: 180px;
20        text-align: center;
21        color: #fff;
22        font-size: 30px;
23      }
24
25<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
26</head>
27
28
29
30<!-- Slider main container -->
31    <div class="swiper-container">
32      <!-- Additional required wrapper -->
33      <div class="swiper-wrapper">
34        <!-- Slides -->
35        <div class="swiper-slide" style="
36				background-color: red;
37				background-repeat: no-repeat;
38				width: 1261px;
39				background-size: cover;
40				background-position: center center;">
41        </div>
42        <div class="swiper-slide">Slide 2</div>
43        <div class="swiper-slide">Slide 2</div>
44      </div>
45      <!-- If we need pagination -->
46      <div class="swiper-pagination"></div>
47
48      <!-- If we need navigation buttons -->
49      <div class="swiper-button-prev"></div>
50      <div class="swiper-button-next"></div>
51    </div>
52.
53.
54.
55略
56.
57.
58.
59
60</body>
61  <script type="text/javascript">
62    var mySwiper = new Swiper('.swiper-container', {
63      loop: true,
64      pagination: '.swiper-pagination',
65      nextButton: '.swiper-button-next',
66      prevButton: '.swiper-button-prev',
67    })
68</script>
69</html>

.swiper-pagination-bullet {
	display: inline-block;
	width:13px !important;
	height:13px !important;

kei344

2018/11/06 08:00

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

hellohello

2018/11/06 08:27

kei344様　質問文に不備があり大変申し訳ありません。ご指摘ありがとうございました！以後注意いたします。

hellohello

2018/11/06 08:27

またなにか至らぬ所ありましたらぜひ仰ってください。大変失礼いたしました。

kei344

2018/11/06 08:30

試したHTML/CSSも提示されてはいかがでしょうか。また、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

hellohello

2018/11/06 08:56

何度もお手を煩わせてしまい、大変恐縮です。いかがでしょうか？　アドバイス頂きありがとうございます。

回答1件

ベストアンサー

HTML
1    <div class="swiper-container">
2      <!-- Additional required wrapper -->
3      <div class="swiper-wrapper">
4        <!-- Slides -->
5        <div class="swiper-slide" style="
6                background-color: red;
7                background-repeat: no-repeat;
8                width: 1261px;
9                background-size: cover;
10                background-position: center center;">
11        </div>
12        <div class="swiper-slide">Slide 2</div>
13        <div class="swiper-slide">Slide 2</div>
14      </div>
15      <!-- If we need pagination -->
16
17      <!-- If we need navigation buttons -->
18      <div class="swiper-button-prev"></div>
19      <div class="swiper-button-next"></div>
20    </div>
21      <div class="swiper-pagination"></div><!-- ←外に出せばよいです。スタイルは元のスタイルを参考にしてください。 -->
22```**動くサンプル：**[https://jsfiddle.net/25hym0s4/](https://jsfiddle.net/25hym0s4/)