Q&A複数使用できるようにswiper-container に名前を追加して書きこむとデザインが崩れ ページネーションも消えてしまいます。
質問お願いします。
只今、カルセール設定をしているのですが、どうもうまくいきません。
※ボダンの設定でやったこと
1, 左右の矢印とページネーションを写真の外に出しました。
2, ページネーションを外に出すと 中央よりが解除されるようで swiper-pagination をdiv で囲い、width: 50px; margin: 10px auto 10px auto; と設定すると 中央に寄せることが出来ました。
※swiperを複数使用する為にやったこと
HTML にて swiper-container のよこに slide1, slide2 というように、各スライダーに名前を追加しました。(元の名前swiper-container を残しておくという説明があったので消していません)
※結果
1, スワイパーを二つ並べると ページネーションが消えてしまいます。
2, ボタンを別々に動くように 各スワイパーに名前を付けて設定するとデザインが崩れ 左右のボタンも効かなくなります。
どのように設定するとよいのでしょうか。よろしくお願いいたします
※解決する為にやったこと。インターネットで「スワイパーを複数使用」などの検索でヒットしたものを読みあさりましたが、どれも「名前を追加するだけ」というもので、名前を追加してもできません。。。youtubeでも検索しましたが、複数の使用の設定方法はヒットしませんでした。
名前を書く場所も変えてみましたが 効果がありません。
※理想の形は 添付画像のスワイパーを複数上下に並べたいです。
※スワイパーを二つ並べるとページネーションが消えてしまいます
※各スライダーに名前を追加するとデザインも崩れ、左右のボタンも効きません
HTMLコード head内 <link rel="stylesheet" href="./../SWIPER/swiper.min.css"> <script src="./../SWIPER/swiper.min.js" defer></script> <script src="./../SWIPER/script.js" defer></script> body内 <h1 class="titulo-youtube text-center letra-rosa ">・・・Arroz・・・</h1> <div class="swiper-custom-parent margin-auto"> <!--swiper-container の横に slide1 と名前を付けました--> <div class="swiper-container slide1 box-shadow-O"> <div class="swiper-wrapper "> <div class="swiper-slide"><img src="./../imagen/youtube/01-Y-curry.JPG" alt="Curry"></div> <div class="swiper-slide"><img src="./../imagen/youtube/03-Y-arroz-blanco.jpg" alt="Arroz blanco"></div> <div class="swiper-slide"><img src="./../imagen/youtube/04-Y-sushi.jpg" alt="Sushi"></div> <div class="swiper-slide"><img src="./../imagen/youtube/12-Y-oyakodon.jpg" alt="Oyakodon"></div> <div class="swiper-slide"><img src="./../imagen/youtube/18-Y-yakimeshi.jpg" alt="Yakimeshi"></div> <div class="swiper-slide"><img src="./../imagen/youtube/21-Y-omurice.jpg" alt="Omurice"></div> </div> </div> <div class="pagenation-base "> <div class="swiper-pagination"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!--slide2 の記載は省略させて頂きます-->
sccコード /*矢印ボタンを外に出すタグ*/ .swiper-custom-parent{ max-width: 80%; position: relative; /*ボタン表示の為*/ } /*スワイパーを囲う枠*/ .swiper-container{ max-width: 87%; border-radius: 20px; } .swiper-slide img { max-width: 100%; } /*下ボタン同士の余白*/ .swiper-pagination-clickable .swiper-pagination-bullet{ margin: 3px; } /*paginationを中央にするタグ*/ .pagenation-base{ width: 50px; margin: 10px auto 10px auto; }
script.js コード //参考資料をもとに、元々の記載だった'.swiper-container', を消して '.slide1', にしました const swiper = new Swiper('.slede1', { slidesPerView:3, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, }); // そして、下記のように '.slide2',を指定すると たちまちデザインが崩れ、ボタンも効かなくなります const swiper = new Swiper('.slede2', { slidesPerView:3, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, });
回答2件
0
まず、セレクタが間違っています。
'.slede1'→.slide1
次に、コンソールにエラーメッセージが出ていたと思います。
（うまくいかないときにエラーメッセージを確認するのは基本ですので、習慣づけた方がいいでしょう）
同じ名前の変数を2回宣言したことによるエラーでした。
こうしてみてください。
js
1const swiper = new Swiper('.slide1,.slide2', {
最後にHTMLが公式のドキュメントと違うものになっています。
いろいろ手を加えるのはいいことだと思いますが、上手くいかないときには公式の通りに戻してみると上手くいくことがありますので、試してみるといいかと思います。
html
1 <!--swiper-container の横に slide1 と名前を付けました--> 2 <div class="swiper-container slide1 box-shadow-O"> 3 <div class="swiper-wrapper "> 4 ... 5 </div> 6<!-- </div> 公式では.swiper-containerをここで閉じていない --> 7 8 <div class="pagenation-base "> 9 <div class="swiper-pagination"></div> 10 </div> 11 12 <div class="swiper-button-prev"></div> 13 <div class="swiper-button-next"></div> 14 </div><!-- 公式では.swiper-containerをここで閉じている -->
html
1<!-- Slider main container --> 2<div class="swiper-container"> 3 <!-- Additional required wrapper --> 4 <div class="swiper-wrapper"> 5 <!-- Slides --> 6 <div class="swiper-slide">Slide 1</div> 7 <div class="swiper-slide">Slide 2</div> 8 <div class="swiper-slide">Slide 3</div> 9 ... 10 </div> 11 <!-- If we need pagination --> 12 <div class="swiper-pagination"></div> 13 14 <!-- If we need navigation buttons --> 15 <div class="swiper-button-prev"></div> 16 <div class="swiper-button-next"></div> 17 18 <!-- If we need scrollbar --> 19 <div class="swiper-scrollbar"></div> 20</div>
Add Swiper HTML Layout | Getting Started With Swiper
もし、間違ってHTML構造を変更してしまっているのでしたら、インデントをしっかりつけていないことが原因だと思います。自動インデント機能のあるコードエディタを使うことをお勧めします。
投稿2021/03/27 14:40
総合スコア36896
0
自己解決
質問に対応して下さった Lhankor-Mhyさん いつもありがとうございます!
回答を待たせて頂いている間に、色々検索して情報をさがしておりまして、やっと見つけることが出来ました。
解決するには問題が二つありました。
1つ目
それぞれのボダンの指定の仕方を こちらのページの22項目目「1ページに複数のスワイパーを設置する」にやり方が載っておりました。https://garigaricode.com/swiper/
他のサイトにもやり方が載っておりまして 試してみましたが全然だめでした。でもこちらのサイトの助言で成功しました。
2つ目
あるyoutube動画の説明の中に swiperのjsファイルの文頭に **var **swiper = new Swiper() を
const swiper = new Swiper() にしましょうと説明させていたので (varをconstに変える) constにしていたのですが、varにしてみるとすんなり出来ました。constが邪魔をしていたことがわかりました。
しかし、現在のswiper の公式サイト(2021年3月)の 初期設定方法には const swiper = new Swiper() と書かれているので、私と同じように初心者の方は 同じような問題がおこるかもしれません。。。
なので、この質問が今後誰かの役に立てれば幸いです。
const swiper = new Swiper() で動作がうまくいかない時は**var **swiper = new Swiper()に変えて試してみるといいと思います。
※ページネーションは消えたままですが、矢印ボタンが動くようになったので十分でございます!
読んでくださった方、ありがとうございます。そして質問ができる場所を作ってくださっているtetatailさんに感謝しております。
投稿2021/03/27 17:52
総合スコア11
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/27 17:00