質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

838閲覧

カルーセルスライダーのボタンを押しても動かない

DaichiNakajima

総合スコア62

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2022/07/30 04:56

前提

 以下のWebサイトに従って、カルーセルスライダーを作成しています。
(https://pengi-n.co.jp/blog/carousel/#i-2)
このサイトと少し違う点は、liの要素が単純な画像ではない点です。また、各liにモーダルウィンドウをつけています。

実現したいこと

 今の目標は、左右端に配置したボタンを押すと、スライダーが指定した分だけ横にスライドするようにすることです。参考のWebサイトの4-7の部分に相当します。

発生している問題・エラーメッセージ

 左右端に配置したボタンを押しても動きません。

該当のソースコード

multipleModal.html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>複数モーダル</title> 7 <link href="assets/css/newCars.css" rel="stylesheet"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9 <script> 10 11 // モーダルが複数ある場合 12 $(function () { 13 14 // モーダルのボタンをクリックした時 15 $('.modal_trigger .modal_btn').on('click', function() { 16 var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得 17 $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する 18 }); 19 20 // ×やモーダルの背景をクリックした時 21 $('.modal_close , .modal_bg').click(function(){ 22 $('.modal_box').fadeOut(); // モーダルを非表示にする 23 }); 24 }); 25 26 27 //$(function () { 28 ////////// スライドリストの合計幅を計算 → CSSでエリアに代入 29 let width = $('.modal_btn').outerWidth(true); // .modal_btnの1枚分の幅 30 let length = $('.modal_btn').length; // .modal_btnの数 31 let slideArea = width * length; // レール全体幅 = スライド1枚の幅 × スライド合計数 32 $('.modal_trigger').css('width', slideArea); // カルーセルレールに計算した合計幅を指定 33 //}); 34 35 ////////// スライド現在値と最終スライド 36 let slideCurrent = 0; // スライド現在値(1枚目のスライド番号としての意味も含む) 37 let lastCurrent = $('.modal_btn').length - 1; // スライドの合計数=最後のスライド番号 38 39 function changeslide() { 40 $('.modal_trigger').stop().animate({ // stopメソッドを入れることでアニメーション1回毎に止める 41 left: slideCurrent * width // 代入されたスライド数 × リスト1枚分の幅を左に動かす 42 }); 43 }; 44 45 //////////// ボタンクリック時「changeslide」関数を呼び出し 46 // NEXTボタン 47 $('.arrow-btn js-btn-next').click(function () { 48 if (slideCurrent === lastCurrent) { // 現在のスライドが最終スライドの場合 49 slideCurrent = 0; 50 changeslide(); // スライド初期値の値を代入して関数実行(初めのスライドに戻す) 51 } else { 52 slideCurrent++; 53 changeslide(); // そうでなければスライド番号を増やして(次のスライドに切り替え)関数実行 54 }; 55 }); 56 // BACKボタン 57 $('.arrow-btn js-btn-back').click(function () { 58 if (slideCurrent === 0) { // 現在のスライドが初期スライドの場合 59 slideCurrent = lastCurrent; 60 changeslide(); // 最終スライド番号を代入して関数実行(最後のスライドに移動) 61 } else { 62 slideCurrent--; 63 changeslide(); // そうでなければスライド番号を減らして(前のスライドに切り替え)関数実行 64 }; 65 }); 66 67 </script> 68 </head> 69 <body> 70 <div class="newCars"> 71 <ul class="modal_trigger"><!--7/27--> 72 <li class="modal_btn" id="matsuda"> 73 <img src="assets/img/matsuda_cx5.png"> 74 </li> 75 <li class="modal_btn" id="toyota"> 76 <img src="assets/img/9_38_1_030.png"> 77 </li> 78 </ul> 79 80 <div class="modal_area"> 81 <div class="modal_box"> 82 <div class="modal_bg"></div> 83 <div class="modal_inner"> 84 <div class="modal_block"> 85 <ul> 86 <li class="modal_btn" id="matsuda"> 87 <img src="assets/img/matsuda_cx5.png"> 88 </li> 89 </ul> 90 </div> 91 <div class="modal_close">×</div> 92 </div> 93 </div> 94 <div class="modal_box"> 95 <div class="modal_bg"></div> 96 <div class="modal_inner"> 97 <div class="modal_block"> 98 <ul> 99 <li class="modal_btn" id="toyota"> 100 <img src="assets/img/9_38_1_030.png"> 101 </li> 102 </ul> 103 </div> 104 <div class="modal_close">×</div> 105 </div> 106 </div> 107 </div> 108 109 <div class="arow-wrap"> 110 <div class="arrow-left"> 111 <button class="arrow-btn js-btn-back" type="button"></button> 112 </div> 113 <div class="arrow-right"> 114 <button class="arrow-btn js-btn-next" type="button"></button> 115 </div> 116 </div> 117 </div> 118 119 </body> 120</html>

newCars.css

1#newCars { 2 position: relative;/*0730*/ 3} 4#newCars_txt h1{ 5 text-align: center; 6} 7#newCars_txt p{ 8 text-align: center; 9 color: rgb(121, 121, 121, 0.5); 10 font-size: 15px; 11} 12.modal_trigger { 13 margin: 0 auto; 14 margin-top: 100px;/*0729*/ 15 margin-bottom: 100px; 16 display: flex; 17 justify-content: center; 18 position: absolute;/*0730*/ 19 /*width: 200%;*/ 20 /*overflow-y: hidden;/**0730*/ 21} 22.modal_trigger li { 23 display: inline-block; 24 box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); 25 border-radius: 5px; 26 cursor: pointer; 27 width: 200px;/*0729 fix*/ 28 height: auto; 29 position: relative; 30} 31.modal_trigger li::before { 32 content: ''; 33 display: inline-block; 34 width: 100%; 35 height: 100%; 36 background: #336666; 37 -webkit-transform: translateY(-100%); 38 transform: translateY(-100%); 39 position: absolute; 40 left: -20px; 41 top: 100%; 42 z-index: -1; 43 opacity: 0; 44} 45.modal_trigger li:hover {/*change the text color*/ 46 color: #FFF; 47} 48.modal_trigger li:hover::before{ 49 -webkit-animation: slideRightBg ease .2s forwards; 50 animation: slideRightBg ease .2s forwards; 51} 52.modal_trigger li + li { 53 margin-left: 20px; 54} 55.upper_modal{ 56 display: flex; 57 justify-content: space-around; 58} 59.modal_btn img{ 60 width: 100%; 61 height: auto; 62} 63.modal_txt { 64 width: 45% 65} 66.modal_txt p{ 67 margin: 0; 68 font-size: 12px; 69} 70.favorite{ 71 position: relative;/*specify for .heart parent element*/ 72 box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7); 73 width: 48%; 74 height: 40px; 75} 76.favorite_txt{ 77 width: 100%; 78 margin-left: -10px; 79} 80.favorite_txt p{ 81 text-align: center; 82 font-size: 12px; 83} 84.clip{ 85 display: flex; 86} 87.clip span{ 88 width: 20px; 89 height: 20px; 90} 91.clip img{ 92 position: absolute; 93 width: 20px; 94 height: 20px; 95 /*keep .clip inside the #favorite*/ 96 right: 0; 97 bottom: 20%; 98 background-color: #797979; 99} 100.clip input[type="checkbox"]:checked + span > img { 101 background-color: #ede327; 102} 103.clip input{ 104 display: none; 105} 106.detail-button{ 107 margin: 20px auto;/*center the box*/ 108 text-align: center;/*center the a elements*/ 109 border: thin solid black; 110 width: 65%; 111} 112.detail-button a{ 113 display: flex; 114 justify-content: space-around; 115 align-items: center; 116 text-decoration: none; 117 color: black; 118} 119.detail-button p{ 120font-size: 15px; 121margin: 0; 122} 123.detail-button img{ 124 width: 15px; 125 height: 15px; 126 margin-left: -12px; 127} 128@-webkit-keyframes slideRightBg { 129 0% { 130 opacity: 0; 131 left: -50%; 132 } 133 100% { 134 opacity: 1; 135 left: 0; 136 } 137} 138@keyframes slideRightBg { 139 0% { 140 opacity: 0; 141 left: -50%; 142 } 143 100% { 144 opacity: 1; 145 left: 0; 146 } 147} 148.modal_box { 149 display: none; 150 height: 100%; 151 left: 0; 152 position: fixed; 153 top: 0; 154 width: 100%; 155 z-index: 9999; 156} 157.modal_bg { 158 background-color: rgba(30, 30, 30, 0.9); 159 height: 100%; 160 width: 100%; 161} 162.modal_inner { 163 background-color: #fff; 164 left: 50%; 165 padding: 20px 40px 40px 40px; 166 position: absolute; 167 top: 50%; 168 -webkit-transform: translate(-50%, -50%); 169 transform: translate(-50%, -50%); 170 max-width: 900px; 171} 172.modal_block ul { 173 padding-left: 0; 174} 175.modal_block li { 176 list-style-type: none; 177} 178.modal_close { 179 cursor: pointer; 180 position: absolute; 181 right: 10px; 182 top: 0; 183 font-size: 2rem; 184} 185/* ボタンタグの装飾リセット */ 186button { 187 cursor: pointer; 188 -webkit-appearance: none; 189 -moz-appearance: none; 190 appearance: none; 191 vertical-align: middle; 192 color: inherit; 193 font: inherit; 194 border: 0; 195 background: transparent; 196 padding: 0; 197 margin: 0; 198 outline: none; 199 border-radius: 0; 200 } 201 /*********** スライド送りボタン ***********/ 202 /* 共有パーツ */ 203 .arow-wrap { 204 position: fixed; 205 inset: 0; 206 margin: auto; 207 width: 90%; 208 height: 100%; 209 margin-top: -123px;/*無理矢理高さ合わせている*/ 210 display: flex; 211 justify-content: space-between; 212 align-items: center; 213 } 214 .arrow-btn { 215 width: 48px; 216 height: 48px; 217 background-color: #336666; 218 border-radius: 50%; 219 transition: .2s; 220 } 221 /* 左 */ 222.arrow-left { 223 position: relative 224 } 225 /* ボタン左の中身(三角を擬似要素で表現) */ 226 .arrow-left:before { 227 content: ""; 228 width: 10px; 229 height: 10px; 230 border-top: 2px solid #fefefe; 231 border-left: 2px solid #fefefe; 232 position: absolute; 233 top: 50%; 234 left: 50%; 235 transform: translate(-30%, -50%)rotate(-45deg); 236 } 237 /* 右 */ 238 .arrow-right { 239 position: relative 240 } 241 /* ボタン右の中身(三角を擬似要素で表現) */ 242 .arrow-right:before { 243 content: ""; 244 width: 10px; 245 height: 10px; 246 border-top: 2px solid #fefefe; 247 border-left: 2px solid #fefefe; 248 position: absolute; 249 top: 50%; 250 left: 50%; 251 transform: translate(-70%, -50%)rotate(135deg); 252 }

試したこと

モーダルウィンドウの影響を考え、モーダルウィンドウを排除して、ボタンで動くか試してみましたが、動きませんでした。このことから、単純にjavaScriptの問題だと考えています。

文字数の関係から、htmlファイルは大幅に削ってあります。修正すべき点は多々ありますが、どうすれば動くかだけをご教授いただければ幸いです。よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

参考にしたWebサイトの内容を先に丸々コピーし、そのあと異なる部分だけトップダウン的に再構成したら解決しました。

自分のコードに参考のコードを付け足していくのではなく、参考文献に自分のコードを入れ込む作り方に変更しました。

投稿2022/08/03 08:35

DaichiNakajima

総合スコア62

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<button class="arrow-btn js-btn-back" type="button"></button>
この要素をjQueryで取得する場合、
$('.arrow-btn js-btn-next')ではなく
$('.arrow-btn.js-btn-next')となります。
参考:これで完璧!jQueryのセレクタ操作を完全理解するコツまとめ!ー「and」によるセレクタ指定

補足ですが、
ご提示いただいたHTMLを見る限り、js-btn-nextのクラスがついている要素はこのボタンだけのようなので、
$('.js-btn-next')だけでも良いのではないかと思います。

投稿2022/07/31 01:35

nae_stage

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

DaichiNakajima

2022/08/03 08:33

ご回答ありがとうございます!今後の参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問