swiperを使用した時にアローアイコンを画像の中の両端に設置して、画像を中央寄せにしたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="/original01/swiper-master/package/css/swiper.css">
7    <title>Document</title>
8</head>!
9
10    <body>
11      <div class="swiper-container">
12        <div class="swiper-wrapper">    
13          <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"></div>
14          <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper02.png" alt="Swiper02"></div>
15          <div class="swiper-slide"><img src="https://haniwaman.com/wp-content/uploads/2018/05/swiper03.png" alt="Swiper03"></div>
16        </div>
17        <div class="swiper-button-prev"></div>
18        <div class="swiper-button-next"></div>
19      </div>
20
21       
22    </html>
23    
24    <script src="/original01/swiper-master/package/js/swiper.js"></script>
25    <script>
26        var swiper = new Swiper('.swiper-container', {
27  navigation: {
28    nextEl: '.swiper-button-next',
29    prevEl: '.swiper-button-prev',
30  },
31  loop: true,
32  pagination: {
33      el: '.swiper-pagination',
34      type: 'bullets',
35      clickable: true,
36    },
37});
38    </script>
39    <script></script>
40</body>
41</html>

上記のように、アローアイコンがはみ出たようになっているのですが画像を中央寄せにして、画像の上に重ねるように両端に配置したいです。

　　　   <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>

上記をCSSなどで調整してみましたがうまく行きませんでした。
ご回答何卒宜しくお願いいたします。

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

回答1件

ベストアンサー

CSSの記述の問題なので、質問文にCSSも載せていただけるといいかと思います。
とりあえず文面から察するに、下記のCSSでいかがでしょうか。

画像幅にあわせて.swiper-containerを900pxにする場合は下記のコードでいけるかと。

CSS
1    body {
2        width: 100%; // サイトbody内が100%と仮定
3    }
4    .swiper-container {
5        margin: 0 auto; // スライドコンテンツのセンタリング
6        max-width: 900px; // スライドコンテンツの最大幅
7        height: 300px; // スライドコンテンツの高さ
8    }
9    .swiper-slide {
10        text-align: center; // センタリング
11    }

画像がスライダーの幅より小さい場合にトリミング、ブラウザ幅にあわせて可変するなら下記でどうでしょうか。

CSS
1    body {
2        width: 100%;
3    }
4    .swiper-container {
5        margin: 0 auto;
6        max-width: 1000px; // スライドコンテンツが画像より大きいと仮定
7        height: 300px;
8    }
9    .swiper-slide img {
10        width: 100%;
11        object-fit: cover; // スライド内の画像をトリミング
12    }