Swiper js のボタンをpaginationの両脇に移動させたい。

JavaScript
1const swiper = new Swiper(".swiper", {
2  // ページネーションが必要なら追加
3  pagination: {
4    el: ".swiper-pagination",
5    type: "fraction" ,
6    formatFractionCurrent: function (number) {
7      if (number < 10) {
8        return '0' + number;
9      } else {
10        return number;
11      }},
12    formatFractionTotal: function (number){
13      return '0'+number;
14    }
15},
16  // ナビボタンが必要なら追加
17  navigation: {
18    nextEl: ".swiper-button-next",
19    prevEl: ".swiper-button-prev"
20  }
21});

CSS
1/*Swiper*/
2.swiper-wrapper {
3  /* wrapperのサイズを調整 */
4  width: 552px;
5  height: 240px;
6}
7
8.swiper-slide {
9  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
10  width: 552px;
11  height: 240px;
12  color: #ffffff;
13  text-align: center;
14  line-height: 60px;
15  padding-bottom: 40px;
16  padding-top: 30px;
17  text-align: center;
18  background-position: center;
19  background-image: url("images/長方形 15, カード背景.png");
20  background-repeat: no-repeat; /* 背景画像を繰り返し表示しません。*/
21}
22
23.swiper-slide p {
24  color:black;
25  font-size:36px;
26  font-weight: normal;
27  text-align: center;
28  padding-bottom: 40px
29}
30.number{
31  color:#1f2774;
32  font-weight: bold;
33  text-decoration: underline;
34}
35
36.swiper-button-prev,
37.swiper-button-next {
38  width: 40px; /* ボタンの幅 */
39  height: 40px; /* ボタンの高さ */
40  background-size: 40px 40px; /* 表示したいサイズ */
41}
42
43.swiper-container .swiper-button-next {
44	background-image: url("images/arrowBtn 矢ボタン右.png");
45	background-repeat: no-repeat;
46	/*position: relative;*/
47	top:89%;
48	right: 30px;
49}
50.swiper-container .swiper-button-prev {
51	background-image: url("images/arrowBtn 矢ボタン右.png");
52	transform: scale(-1, 1); /* 左右反転 */
53	background-repeat: no-repeat;
54	top:89%;
55}
56
57.swiper-button-prev:after,
58.swiper-button-next:after {
59 display: none;
60 margin: auto;
61}
62.swiper-button-prev:after,
63.swiper-button-next:after{
64  background-image: url("images/arrowBtn 矢ボタン右.png");
65  background-repeat: no-repeat;
66  background-size: contain;
67  content: "";
68  height: 40px;
69  width: 40px;
70}
71.swiper-container {
72	position: relative;
73	height:auto;
74	padding-bottom: 10px;
75	padding-top: -20px;
76}
77/* Swiper本体 */
78
79.swiper {
80	/*width: calc(100% - 100px);*/	/* ☆前・次ページボタンの幅をそれぞれ50pxとして、その分を引く 
81	padding-bottom: 70px;		/* ★ページネーション・スクロールバー分の余白50pxを下に取る */
82	box-sizing: content-box;
83}
84
85.swiper-pagination{
86  font-weight: bold;
87  font-size: 28px;
88  margin: 0;
89}

HTML
1<!-- Slider main container -->
2<div class="swiper-container">
3　<div class="swiper">
4  <!-- Additional required wrapper -->
5  <div class="swiper-wrapper">
6    <!-- Slides -->
7    <div class="swiper-slide">
8     <p><span class="number">01</span><br>
9     カードお申し込み</p>
10    </div>
11    <div class="swiper-slide">
12      <p><span class="number">02</span><br>入会審査・カード発行</p>
13    </div>
14    <div class="swiper-slide">
15      <p><span class="number">03</span><br>カード到着</p>
16    </div>
17    <div class="swiper-slide">
18      <p><span class="number">04</span><br>アプリをダウンロード</p>
19    </div>
20    <div class="swiper-slide">
21      <p><span class="number">05</span><br>アプリでカード番号を確認</p>
22    </div>
23  </div>
24　</div>
25　<!--必要に応じてページネーション -->
26　 <div class="swiper-pagination"></div>
27   <!--必要に応じてナビボタン -->
28　 <div class="swiper-button-prev"></div>
29　 <div class="swiper-button-next"></div>

調べて色々試してみたのですが、上手くいかず、
swiperのボタンを上の写真のように、paginationの両脇に移動させたいです。

Lhankor_Mhy

2022/05/31 14:27

コードをご提示ください

spacyguinea_pig

2022/05/31 15:46

追加しました。

Lhankor_Mhy

2022/06/01 01:01

ありがとうございます。

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

回答1件

絶対配置されているので、手作業で調整をするしかないと思います。
フォントにもよると思いますが、ご提示のコードを見る感じでは、right: calc((100vw - 28px*3)/2 - 40px);とleft: calc((100vw - 28px*3)/2 - 40px);ぐらいでしょうか。

投稿2022/06/01 01:03

Lhankor_Mhy

総合スコア37421