Q&A
HTML と CSS をご提示ください。
お世話になります。
swiperを使ってサイト構築をしているのですがわからないところがあり質問お願いします。
２つのswiperを連動させているのですが
２つ目のmenu swiperの中（薄いピンクの幅）に1、2、3と３つだけがループして表示されるように納めたいのですが、残りがはみ出してしまいます。
ループは問題なくしてくれるのですが中央の１、２、３だけがループするようにしたいです。
参考サイト様
リンク内容
お分かりになる方いらっしゃいましたらどうぞよろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>title</title> 6 <meta name="description" content="a" /> 7 8 <!-- CSS --> 9 <link href="stylesheet.css" rel="stylesheet" /> 10 <link href="./reset_css/reset.css" rel="stylesheet" /> 11 <!-- swiper --> 12 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/> 13 <!-- js --> 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script> 15 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.css"/> 16 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal-default-theme.min.css"/> 17 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 18 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.5/remodal.min.js"></script> 19 </head> 20 <body> 21 <main> 22 <div id="logo"> 23 <img src="" alt="logo" /> 24 </div> 25 <!-- mainのSwiper START --> 26 <div class="swiper1 swiper-container"> 27 28 <!-- menuのSwiper START --> 29 <nav> 30 <div class="swiper2"> 31 <!-- メイン表示部分 --> 32 <div class="menu swiper-wrapper"> 33 <!-- 各スライド --> 34 <div class="swiper-slide"><a>1</a></div> 35 <div class="swiper-slide"><a>2</a></div> 36 <div class="swiper-slide"><a>3</a></div> 37 </div> 38 <div class="swiper-pagination page2"></div> 39 </div> 40 </nav> 41 <!-- menuのSwiper END --> 42 43 <!-- Swiperメイン表示部分 --> 44 <div class="main swiper-wrapper"> 45 46 <!-- 各スライド --> 47 <!--------2 page---------> 48 <div class="2 swiper-slide"> 49 </div> 50 <!--------TOP page---------> 51 <div class="top swiper-slide"> 52 <div class="top"> 53 <img src="" alt=""> 54 </div> 55 </div> 56 57 <!--------3 page---------> 58 <div class="3 swiper-slide"> 59 </div> 60 <!-- Swiper END --> 61 </main> 62 63 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 64 <script src="swiper.js"></script> 65 </body> 66</html> 67
css
1 2main { 3 position: relative; 4 overflow: hidden; 5 color: #605e5e; 6 font-family: "Hiragino Kaku Gothic Pro"; 7 letter-spacing: 0.1em; 8 line-height: 1.5em; 9 font-size: 12px; 10} 11a { 12 cursor: pointer; 13} 14ul { 15 list-style: none; 16} 17h3 { 18 font-weight: normal; 19} 20button { 21 background-color: transparent; 22 border: none; 23 cursor: pointer; 24 outline: none; 25 padding: 0; 26 appearance: none; 27} 28#logo { 29 position: absolute; 30 top: 60px; 31 left: 50%; 32 -webkit-transform: translate(-50%, -50%); 33 transform: translate(-50%, -50%); 34 background: rgb(217, 217, 219); 35 36 z-index: 100; 37} 38#logo img { 39 height: 80px; 40} 41 42/* mainのSwiper全体のスタイル */ 43.swiper1 { 44 position: absolute; 45 top: 0; 46 width: 100%; 47 background: rgb(130, 164, 130); 48 z-index: 50; 49 padding: 77px 0 0 0; 50} 51/* 全スライド共通スタイル */ 52.swiper-slide { 53 color: #605e5e; 54 text-align: center; 55} 56.main .swiper-slide { 57 padding: 310px 0 30px; 58 59} 60 61/* menuのSwiper全体のスタイル */ 62.swiper2 { 63 background: rgb(230, 149, 219); 64 position: absolute; 65 top: 180px; 66 left: 50%; 67 -webkit-transform: translate(-50%, -50%); 68 transform: translate(-50%, -50%); 69 height: 100px; 70 width: 70%; 71 z-index: 200; 72 font-family: "Montserrat", "sans-serif"; 73 font-weight: 800; 74 font-size: 16px; 75} 76 77/* menuのSwiperのスライドのスタイル */ 78.swiper2 .swiper-slide { 79 background: lime; 80 height: 60px; 81 line-height: 80px; 82 -webkit-filter: brightness(0.5); 83 filter: brightness(0.5); 84} 85/* menuのSwiperの現在のスライドのスタイル */ 86.swiper2 .swiper-slide-active { 87 background: magenta; 88 -webkit-filter: brightness(1); 89 filter: brightness(1); 90} 91/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */ 92.swiper-slide:nth-child(4n+1) { 93 background-color: #EECB27; 94} 95/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */ 96.swiper-slide:nth-child(4n+2) { 97 background-color: #E13239; 98} 99/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */ 100.swiper-slide:nth-child(4n+3) { 101 background-color: #1F1762; 102} 103/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */ 104.swiper-slide:nth-child(4n+4) { 105 background-color: #BEDAE5; 106} 107.top { 108 background: #d8d4ca; 109} 110
js
1var mySwiper1 = new Swiper('.swiper1', { 2 autoHeight: true,/*スライドの高さに合わせてSwiperの高さを変える*/ 3 loop: true, 4 centeredSlides: true, 5 spaceBetween: 0, 6 speed: 1000, 7 slidesPerView: 1.2, 8 navigation: { 9 nextEl: '.next1', 10 prevEl: '.prev1' 11 } 12}); 13/*-----------menu swiper----------*/ 14var mySwiper2 = new Swiper('.swiper2', { 15 loop: true, 16 loopedSlides: 6,/*最初のスライドの前、最後のスライドの後に複製される非表示のスライド数を設定する。総スライド数の半分以上の値を指定しておけばOK。*/ 17 centeredSlides: true,/*現在のスライドを中央に表示する*/ 18 controller: { 19 control: mySwiper1,/*連動させるSwiperの定義名を指定*/ 20 inverse: false,/*連動させるSwiperの制御方向を標準にする*/ 21 by: 'slide'/*連動させるSwiperをスライド単位で制御する*/ 22 }, 23 spaceBetween: 10, 24 speed: 1000, 25 slidesPerView: 3,/*一度に表示するスライド数を指定。'auto'の時はスライドの大きさ次第。*/ 26 slideToClickedSlide: true,/*スライドクリックでそのスライドに移動する*/ 27 28}); 29mySwiper1.controller.control = mySwiper2; 30
失礼しました、html,css追記しました。
また３から２への移動時にボタンクリックには問題ないのですが画面スライドすると変な場所で止まってしまう現象も起きています。
もしこちらもお分かりになりましたらどうかお願い致します。
よろしくお願いします。
以前の質問で指摘したのですが反応が内容なのでこちらに書きます。
https://teratail.com/questions/340441 で
なぜ解決後に全てコードを消したのでしょうか？理由をお答えください。
追記
解決したにしても回答に対して何かしらフィードバックを残すべきです。
ヘルプにも書いてあります。
https://teratail.com/help/question-tips#questionTips4-2
あ、ほんとですね。低評価しておきますね。
回答1件
0
ベストアンサー
かなりオリジナルな使い方をしてらっしゃるようで、老婆心ながらいつかCSSが破綻するのではないかと心配になります。
ご質問の問題を解決するには、ひとまず、こうしてみてはいかがでしょうか。
css
1.swiper2 { 2 overflow: hidden; /* 追加 */ 3}
投稿2021/05/28 03:50
総合スコア36960
あなたの回答
tips
プレビュー
