【swiper設定について】ボタン画像がスライド裏に回ってしまう/スライダー下部にスライダーバーが表示されてしまう

swiperを使ったスライダー実装にて、下記2点行き詰まっております。。

①ボタン画像がスライド裏に回ってしまう
②スライダー下部にスライダーバーが表示されてしまう

②はswiperの設定というよりcssでの調整な気がしているのですが、解決策が見いだせずです。
どうかお助けくださいませ。。

記述しているコードは以下の内容です。

html
1      <div class="sec12 relative" data-type="visibility">
2        <img alt="" src="img/sp/sec_12.jpg" />
3        <div class="sec12-swiper">
4          <div class="swiper-button-next03"></div>
5          <div class="swiper-button-prev03"></div>
6          <div class="swiper-container3 swiper3">
7            <div class="swiper-wrapper">
8              <div class="slider">
9                <picture>
10                  <img
11                    src="img/sp/slider3_01.jpg"
12                    alt=""
13                    width="630"
14                    height="873"
15                  />
16                </picture>
17              </div>
18              <div class="swiper-slide">
19                <picture>
20                  <img
21                    src="img/sp/slider3_02.jpg"
22                    alt=""
23                    width="630"
24                    height="873"
25                  />
26                </picture>
27              </div>
28              <div class="swiper-slide">
29                <picture>
30                  <img
31                    src="img/sp/slider3_03.jpg"
32                    alt=""
33                    width="630"
34                    height="873"
35                  />
36                </picture>
37              </div>
38              <div class="swiper-slide">
39                <picture>
40                  <img
41                    src="img/sp/slider3_04.jpg"
42                    alt=""
43                    width="630"
44                    height="873"
45                  />
46                </picture>
47              </div>
48            </div>
49          </div>
50        </div>
51      </div>

css
1      .sec12-swiper {
2        position: absolute;
3        width: 92%;
4        top: 25.4%;
5        left: 50%;
6        transform: translateX(-50%);
7      }
8     .swiper-container3 {
9        width: 84%;
10        overflow-y: hidden;
11        margin: 0 auto;
12      }
13      .swiper-button-prev,
14      .swiper-button-prev02,
15      .swiper-button-prev03,
16      .swiper-button-next,
17      .swiper-button-next02,
18      .swiper-button-next03 {
19        position: absolute;
20        width: 14vw;
21        height: 14vw;
22        max-width: 130px;
23        max-height: 130px;
24        background-size: contain;
25        background-repeat: no-repeat;
26        top: 55%;
27        transform: translateY(-50%);
28      }
29      .swiper-button-next,
30      .swiper-button-next02,
31      .swiper-button-next03 {
32        background-image: url(./img/sp/swiper-button-next.png);
33        right: -3%;
34      }
35      .swiper-button-prev,
36      .swiper-button-prev02,
37      .swiper-button-prev03 {
38        background-image: url(./img/sp/swiper-button-prev.png);
39        left: -3%;
40      }
41      .swiper-button-next::after,
42      .swiper-button-next02::after,
43      .swiper-button-next03::after {
44        content: "";
45      }
46      .swiper-button-prev::after,
47      .swiper-button-prev02::after,
48      .swiper-button-prev03::after {
49        content: "";
50      }

js
1      var mySwiper3 = new Swiper(".swiper3", {
2        loop: true,
3        slidesPerView: 1,
4        navigation: {
5          nextEl: ".swiper-button-next03",
6          prevEl: ".swiper-button-prev03",
7        },
8      });

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

回答1件

自己解決

自己解決いたしました…！
最適解かは分かりませんが、解決方法は下記の通りでした。

①css
.swiper-button-nextと .swiper-button-prevに対して、z-index: 10を追加
→無理矢理ですが矢印を最前面に表示させることが可能になりました

②css
.swiper-container3に対してoverflow-x:hiddenを追加
→overflow-y:hiddenで縦軸の表示させたい範囲から溢れてる画像は非表示にしていましたが、x軸（横軸）の溢れた分を非表示にしていなかったためにスクロールバーが出ていました。
上記の記述で縦横の表示させたいエリア外の画像はないものする指示ができたので、スクロールバーも消えました。

投稿2022/06/21 12:56

manmaru

総合スコア31