Swiper.jsでページネーションボタンをスライド外に配置できない

Swiper.jsを使ってスライダーをコーディングしていますが、ページネーションボタンがスライドの外に配置できず苦戦しております。

やりたいことは、ページネーションボタンをスライドの外(下側)に配置することです。

画像はhttps://garigaricode.com/swiper_navigation/#sample4の記事から拝借いたしました。

画像を引用した先の記事を読んで書いてみましたが、同じように動作せず、スライドの中にページネーションボタンがある状態から変わりませんでした。
https://garigaricode.com/swiper_navigation/#sample4

書いているコード該当部分は以下です。

htmlとJSです。

html
1<div class="swiper-parent">
2		<div class="swiper-container">
3		 <div class="swiper-wrapper">
4			 <div class="swiper-slide"></div>
5		         <div class="swiper-slide"></div>
6		         <div class="swiper-slide"></div>
7			 <div class="swiper-slide"></div>
8		</div>
9							
10		<div id="swiper-pagination"></div>
11		</div>
12	</div>
13
14	<!-- Swiper JS -->
15				<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
16
17				<!-- Initialize Swiper -->
18			    <script>
19				var mySwiper = new Swiper('.swiper-container', {
20					pagination: {
21						el: '.swiper-pagination',
22						type: 'bullets',
23						clickable: true
24						}
25					});
26 		  	  </script>

CSSです。

CSS
1.swiper-parent {
2	position: relative;
3}
4
5.swiper-container {
6	width: 100%;
7	padding-bottom: 150px;	
8	height: 300px;
9	box-sizing: content-box;
10}
11
12.swiper-wrapper .swiper-slide {
13	color: #fff;
14	width: 100%;
15	height: 100%;
16	text-align: center;
17	line-height: 250px;
18	padding-top: 100px;
19}
20
21#swiper-pagination{
22	margin-bottom: -330px;
23}
24
25.swiper-slide:nth-child(4n+1) {
26	background-color: #008BBB;
27}
28
29/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
30.swiper-slide:nth-child(4n+2) {
31	background-color: #E13239;
32}
33/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
34.swiper-slide:nth-child(4n+3) {
35	background-color: #1F1762;
36}
37/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
38.swiper-slide:nth-child(4n+4) {
39	background-color: #BEDAE5;
40}
41

よろしくお願いいたします。

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

回答2件

ベストアンサー

質問者さんが参考にしたページのコードをそのままコピペすると、以下のようになり、正常に動作することが確認できました。写し間違えていないかどうか、確認してみてはいかがでしょうか？

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <style>
8        /* 全体のスタイル */
9        .swiper-wrapper {
10            width: 100%;
11            height: 250px;
12        }
13
14        /* 全スライド共通スタイル */
15        .swiper-slide {
16            color: #ffffff;
17            width: 100%;
18            height: 100%;
19            text-align: center;
20            line-height: 250px;
21        }
22
23        /* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
24        .swiper-slide:nth-child(4n+1) {
25            background-color: #EECB27;
26        }
27
28        /* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
29        .swiper-slide:nth-child(4n+2) {
30            background-color: #E13239;
31        }
32
33        /* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
34        .swiper-slide:nth-child(4n+3) {
35            background-color: #1F1762;
36        }
37
38        /* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
39        .swiper-slide:nth-child(4n+4) {
40            background-color: #BEDAE5;
41        }
42
43        /* Swiperの親要素 */
44        .swiper-parent {
45            position: relative;
46        }
47
48        /* Swiper本体 */
49        .swiper-container {
50            width: calc(100% - 100px); /* ☆前・次ページボタンの幅をそれぞれ50pxとして、その分を引く */
51            padding-bottom: 50px; /* ★ページネーション・スクロールバー分の余白50pxを下に取る */
52            box-sizing: content-box;
53        }
54
55        /* 前・次スライドボタンの縦位置調整（スライドの高さの中央に合わせる） */
56        .swiper-button-prev, .swiper-button-next {
57            top: calc((100% - 50px) * 0.5); /* ☆★ページネーション・スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
58            margin-top: -22px; /* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
59        }
60    </style>
61</head>
62<body>
63<div class="swiper-parent">
64    <!-- Swiper START -->
65    <div class="swiper-container">
66        <!-- メイン表示部分 -->
67        <div class="swiper-wrapper">
68            <!-- 各スライド -->
69            <div class="swiper-slide">Slide 1</div>
70            <div class="swiper-slide">Slide 2</div>
71            <div class="swiper-slide">Slide 3</div>
72            <div class="swiper-slide">Slide 4</div>
73        </div>
74        <!-- ページネーション -->
75        <div class="swiper-pagination"></div>
76        <!-- スクロールバー -->
77        <div class="swiper-scrollbar"></div>
78    </div>
79    <!-- Swiper END -->
80    <!-- 前ページボタン -->
81    <div class="swiper-button-prev"></div>
82    <!-- 次ページボタン -->
83    <div class="swiper-button-next"></div>
84</div>
85
86<!-- Swiper JS -->
87<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
88
89<!-- Initialize Swiper -->
90<script>
91    var mySwiper = new Swiper('.swiper-container', {
92        navigation: {
93            nextEl: '.swiper-button-next',
94            prevEl: '.swiper-button-prev',
95        },
96        pagination: {
97            el: '.swiper-pagination',
98            type: 'bullets',
99            clickable: true
100        },
101        scrollbar: {
102            el: '.swiper-scrollbar',
103            draggable: true,
104        }
105    });
106</script>
107</body>
108</html>

投稿2018/10/06 16:24

s8_chu

総合スコア14731

ul_

2018/10/07 02:44

ご回答ありがとうございます。コードの提示ありがとうございます。該当範囲をコピペして自分のhtmlコードに書き加えたのですが、なぜかスライダーが消え、表示されなくなります。。図々しく本当に申し訳ないのですが、原因をご教授願えませんでしょうか。test2.htmlです。https://github.com/ia17011/html_practice

s8_chu

2018/10/07 03:36 編集

`test2.html`のHTML, CSS, JavaScriptに変更を加えたところ、私の環境で動作することが確認できました( https://codepen.io/anon/pen/jeMXWa )。質問者さんが、実際に上記リンク先で動作確認をした場合も、正常に動作することを確認できますか？もし出来たのであれば、今回の問題の原因は、「参考サイトからコードを写し間違えていたこと」だと思います。

ul_

2018/10/07 04:43

確認できました。本当にありがとうございます。ローカルの自分のhtmlではなぜか表示されない問題がありましたが、paddingを触って .swiper-paginationをposition: relative !important;とすると表示できました。

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

HTML・CSS共に、swiper-paginationを「id」で割り当てていますが、「class」に戻してみてください。「Swiper.js」本体では「class」で設定されているので、「id」を割り当てると、「別セレクタ」となり、無効になります。

ページネーション部を外に出すのは、.swiper-containerで取っている下側のパディング内に収めます。それ以上の値を入れても、.swiper-containerにCSSでoverflow:hidden;が設定されているので、はみ出す部分は表示されません。
※この場合はマイナス値全部

提示されたコードには、.swiper-containerのoverflow:hidden;は設定されていませんが、「Swiper.js」本体に設定されています。

「s8_chu」さんの回答にあるように誤記述の可能性があると思いますので、再度「カスタマイズ範囲」を確認されると良いかと思います。

投稿2018/10/07 02:19

yoshinavi

総合スコア3523

ul_

2018/10/07 02:49

ご回答ありがとうございます。Swiper本体の設定、そのようになっていたんですね。現在なぜかスライダー自信が消えてしまっています。原因と考えられるカスタマイズ範囲というのは、他の要素のmarginとpaddingも影響されますでしょうか。お手すきの時間にコードを見てもらえたら嬉しいです。。図々しく申し訳ありません、test2.html です。https://github.com/ia17011/html_practice

yoshinavi

2018/10/07 06:06

解決されて何よりです。「s8_chu」さんとのコメントで、 > ローカルの自分のhtmlではなぜか表示されない問題がありましたが･･･ →　CSSの読込順番を「swiper.min.css」を先に、「test2.css」を後にして試してみてください。

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

あなたの回答