teratail
回答率
85.25%
質問するログイン新規登録
トップJavaScriptに関する質問swiper.js 同一ページ内に2つ設置した後の方だけ、カスタマイズした矢印が出ない

Q&A

解決済

2回答

179閲覧

swiper.js 同一ページ内に2つ設置した後の方だけ、カスタマイズした矢印が出ない

LibertyBell3
LibertyBell3

総合スコア1087

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2026/05/18 07:42

0

0

実現したいこと

矢印(画像にカスタマイズ)を問題なく表示させたい。

発生している問題・分からないこと

一つ目と同じようにCSSでレイアウトし、クラス別けやScriptも別で適用するようにしているものの、ブラウザのウェブ開発ツールでは、意図した場所に要素が配置されているのに、矢印画像は非表示、さらにクリックも出来ない状況です。

エラーメッセージ

error
1表示されないだけなのでエラーメッセージは無しです。

該当のソースコード

HTML
1<section class="container research-swipe">
2  <div class="swiper">
3    <div class="swiper-wrapper">
4      <div class="swiper-slide">
5        <dl>
6          <dt><img src="top_images/slide0101.jpg" alt=""></dt>
7          <dd>
8            <h3></h3>
9            <p></p>
10          </dd>
11        </dl>
12      </div>
13～～～～～続く～～～～～
14      <div class="swiper-slide">
15        <dl>
16          <dt><img src="top_images/slide0105.jpg" alt=""></dt>
17          <dd>
18            <h3></h3>
19            <p></p>
20          </dd>
21        </dl>
22      </div>
23    </div>
24  </div>
25  <div class="swiper-button-prev"></div>
26  <div class="swiper-button-next"></div>
27</section>
28<section class="container button-area">
29  <em class="more sa bt"><a href="research/index.html"><span>研究の詳細はこちら</span></a></em>
30</section>
CSS
1.top-research {
2  padding-top: 48px;
3}
4
5.top-research strong,
6.top-news strong {
7  display: block;
8  padding-bottom: 108px;
9  list-style: 180%;
10  font-size: 16px;
11  font-weight: 400;
12  text-align: left;
13}
14
15.research-swipe {
16  position: relative;
17}
18
19.research-swipe .swiper-wrapper {
20  display: flex;
21  justify-content: space-between;
22}
23
24.research-swipe .swiper-wrapper .swiper-slide {
25  width: 289px;
26}
27
28.research-swipe dl {
29  margin: 0 auto;
30  width: 100%;
31  max-width: 289px;
32}
33
34.research-swipe dl dt img {
35  border: 13px solid #6a1b7d;
36  border-radius: 50%;
37  width: 100%;
38  height: auto;
39}
40
41.research-swipe dl dd h3 {
42  padding: 36px 0 24px 0;
43  line-height: 100%;
44  font-size: 21px;
45  font-weight: 700;
46}
47
48.research-swipe dl dd p {
49  line-height: 180%;
50  font-size: 15px;
51}
52
53.research-swipe em {
54  padding-top: 200px;
55}
56
57.top-news {
58  padding-top: 48px;
59}
60
61.news-swipe {
62  z-index: 100;
63  position: relative;
64  padding-bottom: 0;
65}
66
67.news-swipe .swiper-wrapper {
68  display: flex;
69  justify-content: space-between;
70}
71
72.news-swipe .swiper-wrapper .swiper-slide {
73  width: 289px;
74}
75
76.news-swipe dl {
77  margin: 0 auto;
78  width: 100%;
79  max-width: 396px;
80}
81
82.news-swipe dl dt img {
83  border: 9px solid #88765a;
84  width: 100%;
85  height: auto;
86}
87
88.news-swipe dl dd h3 {
89  padding: 24px 0 10px 0;
90  color: #88765a;
91  line-height: 100%;
92  font-family:"Lora","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
93  font-size: 27px;
94}
95
96.news-swipe dl dd p {
97  line-height: 180%;
98  font-size: 16px;
99}
100
101.news-swipe em {
102  padding-top: 0;
103}
104
105.button-area {
106  z-index: -1;
107  padding: 160px 0;
108}
109
110.research-swipe .swiper-button-prev {
111  position: absolute;
112  left: calc(50% - 38px);
113  bottom: -60px;
114}
115.research-swipe .swiper-button-next {
116  position: absolute;
117  right: calc(50% - 13px);
118  bottom: -60px;
119}
120.news-swipe .swiper-button-prev {
121  position: absolute;
122  left: calc(50% - 38px);
123  bottom: -60px;
124}
125.news-swipe .swiper-button-next {
126  position: absolute;
127  right: calc(50% - 13px);
128  bottom: -60px;
129}
130
131.research-swipe .swiper-button-prev svg,
132.news-swipe .swiper-button-prev svg,
133.research-swipe .swiper-button-next svg,
134.news-swipe .swiper-button-next svg {
135  display: none;
136}
137
138.swiper-button-prev::after,
139.swiper-button-next::after {
140  bottom: 0;
141  content: "";
142  height: 0;
143  margin: auto;
144  position: absolute;
145  top: 0;
146  width: 0;
147  cursor: pointer;
148  text-rendering: initial;
149}
150
151.research-swipe .swiper-button-prev::after,
152.news-swipe .swiper-button-prev::after {
153  display: block;
154  background: url(../top_images/arrow_prev@2x.png) no-repeat;
155  background-size: 23px 41px;
156  width: 23px;
157  height: 41px;
158  content: "";
159}
160
161.research-swipe .swiper-button-next::after,
162.news-swipe .swiper-button-next::after {
163  display: block;
164  background: url(../top_images/arrow_next@2x.png) no-repeat;
165  background-size: 23px 41px;
166  width: 23px;
167  height: 41px;
168  content: "";
169}
170
171/* これ以外はスマホ用などの余白調整系の記述 */
JavaScript
1<script>
2  const mySwiper1 = new Swiper('.research-swipe .swiper', {
3    slidesPerView: 1,
4    spaceBetween: 20,
5    loop: true,
6    loopAdditionalSlides: 1,
7    speed: 1000,
8    autoplay: {
9      delay: 4000,
10      disableOnInteraction: false,
11    },
12    grabCursor: true,
13    watchSlidesProgress: true,
14    navigation: {
15      nextEl: '.research-swipe .swiper-button-next',
16      prevEl: '.research-swipe .swiper-button-prev',
17    },
18    breakpoints: {
19      751: {
20        slidesPerView: 2,
21        spaceBetween: 30,
22      },
23      1059: {
24        slidesPerView: 3,
25        spaceBetween: 40,
26      }
27    },
28  });
29
30  const mySwiper2 = new Swiper('.news-swipe .swiper', {
31    slidesPerView: 1,
32    spaceBetween: 20,
33    loop: true,
34    loopAdditionalSlides: 1,
35    speed: 1000,
36    autoplay: {
37      delay: 4000,
38      disableOnInteraction: false,
39    },
40    grabCursor: true,
41    watchSlidesProgress: true,
42    navigation: {
43      nextEl: '.news-swipe .swiper-button-next',
44      prevEl: '.news-swipe .swiper-button-prev',
45    },
46    breakpoints: {
47      769: {
48        slidesPerView: 2,
49        spaceBetween: 30,
50      },
51      1059: {
52        slidesPerView: 3,
53        spaceBetween: 40,
54      }
55    },
56  });
57</script>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

もちろん、z-indexを大きい値で付与しても重なり順ではなさそうだし、「text-rendering: initial;」を追記すると直るかもという記事を見て追記するもだめ。

補足

修正作業中、何度も同じような作業していたので、頭がぼーっとしていました…
単純ミスの可能性もありますが、ご了承ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

回答2件

0

ベストアンサー

　公式のドキュメントを見る感じですと、HTML構造は.swiper>.swiper-button-prevとするのが正しいようですが、ご提示いただいたHTMLはそうなっていないように見えました。

https://swiperjs.com/get-started#add-swiper-html-layout

投稿2026/05/18 09:13

Lhankor_Mhy
Lhankor_Mhy

総合スコア37773

LibertyBell3
LibertyBell3

2026/05/18 10:34

回答ありがとうございます。 補足に書いておいたことそのままで、</div>とするところが</ul>になっていました。 ボタンの直前で、ミスってました。Lhankor_Mhyさんの指摘が元での発見なので、 ベストアンサーに選ばせていただきました。ありがとうございました＆ご迷惑おかけしました！ しっかり睡眠取らないとと思いました。
guest

0

原因はほぼこれです。

.button-area {
z-index: -1;
padding: 160px 0;
}

.button-area が z-index: -1 になっているため、直前の .research-swipe 周辺のクリック判定や表示階層に悪影響が出ている可能性が高いです。

修正は以下です。

.button-area {
position: relative;
z-index: 1;
padding: 160px 0;
}

.research-swipe {
position: relative;
z-index: 2;
}

.research-swipe .swiper-button-prev,
.research-swipe .swiper-button-next {
z-index: 10;
width: 23px;
height: 41px;
cursor: pointer;
}

さらに、矢印画像の指定はこの形が安全です。

.research-swipe .swiper-button-prev::after {
content: "";
display: block;
width: 23px;
height: 41px;
background: url("../top_images/arrow_prev@2x.png") no-repeat center / contain;
}

.research-swipe .swiper-button-next::after {
content: "";
display: block;
width: 23px;
height: 41px;
background: url("../top_images/arrow_next@2x.png") no-repeat center / contain;
}

もう1点、画像パスも確認してください。

HTMLでは：

<img src="top_images/slide0101.jpg">

CSSでは：

background: url(../top_images/arrow_prev@2x.png)

になっています。

CSSファイルの場所によっては ../top_images/ が間違っている可能性があります。
HTMLと同じ階層基準ではなく、CSSファイルから見た相対パスで指定する必要があります。

最終回答としては：

原因は、.button-area の z-index:-1 と、矢印画像のCSS相対パス指定ミスの可能性が高いです。
.button-area の z-index を正の値に戻し、swiper-button に width/height/z-index/cursor を明示してください。
また、CSS内の background URL は CSSファイルから見た相対パスで指定してください。

投稿2026/05/21 03:25

LinhHohoai
Famous Pretty Cat

総合スコア0

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.25%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

swiper.js 同一ページ内に2つ設置した後の方だけ、カスタマイズした矢印が出ない