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

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

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

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

HTML5

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

JavaScript

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

解決済

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

DaichiNakajima
nitori-kun

総合スコア53

CSS3

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

HTML5

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

JavaScript

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

2回答

0リアクション

0クリップ

200閲覧

投稿2022/07/30 04:56

前提

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

実現したいこと

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

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

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

該当のソースコード

multipleModal.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>複数モーダル</title> <link href="assets/css/newCars.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> // モーダルが複数ある場合 $(function () { // モーダルのボタンをクリックした時 $('.modal_trigger .modal_btn').on('click', function() { var btnIndex = $(this).index(); // 何番目のモーダルボタンかを取得 $('.modal_area .modal_box').eq(btnIndex).fadeIn(); // クリックしたモーダルボタンと同じ番目のモーダルを表示する }); // ×やモーダルの背景をクリックした時 $('.modal_close , .modal_bg').click(function(){ $('.modal_box').fadeOut(); // モーダルを非表示にする }); }); //$(function () { ////////// スライドリストの合計幅を計算 → CSSでエリアに代入 let width = $('.modal_btn').outerWidth(true); // .modal_btnの1枚分の幅 let length = $('.modal_btn').length; // .modal_btnの数 let slideArea = width * length; // レール全体幅 = スライド1枚の幅 × スライド合計数 $('.modal_trigger').css('width', slideArea); // カルーセルレールに計算した合計幅を指定 //}); ////////// スライド現在値と最終スライド let slideCurrent = 0; // スライド現在値(1枚目のスライド番号としての意味も含む) let lastCurrent = $('.modal_btn').length - 1; // スライドの合計数=最後のスライド番号 function changeslide() { $('.modal_trigger').stop().animate({ // stopメソッドを入れることでアニメーション1回毎に止める left: slideCurrent * width // 代入されたスライド数 × リスト1枚分の幅を左に動かす }); }; //////////// ボタンクリック時「changeslide」関数を呼び出し // NEXTボタン $('.arrow-btn js-btn-next').click(function () { if (slideCurrent === lastCurrent) { // 現在のスライドが最終スライドの場合 slideCurrent = 0; changeslide(); // スライド初期値の値を代入して関数実行(初めのスライドに戻す) } else { slideCurrent++; changeslide(); // そうでなければスライド番号を増やして(次のスライドに切り替え)関数実行 }; }); // BACKボタン $('.arrow-btn js-btn-back').click(function () { if (slideCurrent === 0) { // 現在のスライドが初期スライドの場合 slideCurrent = lastCurrent; changeslide(); // 最終スライド番号を代入して関数実行(最後のスライドに移動) } else { slideCurrent--; changeslide(); // そうでなければスライド番号を減らして(前のスライドに切り替え)関数実行 }; }); </script> </head> <body> <div class="newCars"> <ul class="modal_trigger"><!--7/27--> <li class="modal_btn" id="matsuda"> <img src="assets/img/matsuda_cx5.png"> </li> <li class="modal_btn" id="toyota"> <img src="assets/img/9_38_1_030.png"> </li> </ul> <div class="modal_area"> <div class="modal_box"> <div class="modal_bg"></div> <div class="modal_inner"> <div class="modal_block"> <ul> <li class="modal_btn" id="matsuda"> <img src="assets/img/matsuda_cx5.png"> </li> </ul> </div> <div class="modal_close">×</div> </div> </div> <div class="modal_box"> <div class="modal_bg"></div> <div class="modal_inner"> <div class="modal_block"> <ul> <li class="modal_btn" id="toyota"> <img src="assets/img/9_38_1_030.png"> </li> </ul> </div> <div class="modal_close">×</div> </div> </div> </div> <div class="arow-wrap"> <div class="arrow-left"> <button class="arrow-btn js-btn-back" type="button"></button> </div> <div class="arrow-right"> <button class="arrow-btn js-btn-next" type="button"></button> </div> </div> </div> </body> </html>

newCars.css

#newCars { position: relative;/*0730*/ } #newCars_txt h1{ text-align: center; } #newCars_txt p{ text-align: center; color: rgb(121, 121, 121, 0.5); font-size: 15px; } .modal_trigger { margin: 0 auto; margin-top: 100px;/*0729*/ margin-bottom: 100px; display: flex; justify-content: center; position: absolute;/*0730*/ /*width: 200%;*/ /*overflow-y: hidden;/**0730*/ } .modal_trigger li { display: inline-block; box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.5); border-radius: 5px; cursor: pointer; width: 200px;/*0729 fix*/ height: auto; position: relative; } .modal_trigger li::before { content: ''; display: inline-block; width: 100%; height: 100%; background: #336666; -webkit-transform: translateY(-100%); transform: translateY(-100%); position: absolute; left: -20px; top: 100%; z-index: -1; opacity: 0; } .modal_trigger li:hover {/*change the text color*/ color: #FFF; } .modal_trigger li:hover::before{ -webkit-animation: slideRightBg ease .2s forwards; animation: slideRightBg ease .2s forwards; } .modal_trigger li + li { margin-left: 20px; } .upper_modal{ display: flex; justify-content: space-around; } .modal_btn img{ width: 100%; height: auto; } .modal_txt { width: 45% } .modal_txt p{ margin: 0; font-size: 12px; } .favorite{ position: relative;/*specify for .heart parent element*/ box-shadow: 5px 0 13px 0px rgba(71,102,102, 0.7); width: 48%; height: 40px; } .favorite_txt{ width: 100%; margin-left: -10px; } .favorite_txt p{ text-align: center; font-size: 12px; } .clip{ display: flex; } .clip span{ width: 20px; height: 20px; } .clip img{ position: absolute; width: 20px; height: 20px; /*keep .clip inside the #favorite*/ right: 0; bottom: 20%; background-color: #797979; } .clip input[type="checkbox"]:checked + span > img { background-color: #ede327; } .clip input{ display: none; } .detail-button{ margin: 20px auto;/*center the box*/ text-align: center;/*center the a elements*/ border: thin solid black; width: 65%; } .detail-button a{ display: flex; justify-content: space-around; align-items: center; text-decoration: none; color: black; } .detail-button p{ font-size: 15px; margin: 0; } .detail-button img{ width: 15px; height: 15px; margin-left: -12px; } @-webkit-keyframes slideRightBg { 0% { opacity: 0; left: -50%; } 100% { opacity: 1; left: 0; } } @keyframes slideRightBg { 0% { opacity: 0; left: -50%; } 100% { opacity: 1; left: 0; } } .modal_box { display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999; } .modal_bg { background-color: rgba(30, 30, 30, 0.9); height: 100%; width: 100%; } .modal_inner { background-color: #fff; left: 50%; padding: 20px 40px 40px 40px; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 900px; } .modal_block ul { padding-left: 0; } .modal_block li { list-style-type: none; } .modal_close { cursor: pointer; position: absolute; right: 10px; top: 0; font-size: 2rem; } /* ボタンタグの装飾リセット */ button { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; border: 0; background: transparent; padding: 0; margin: 0; outline: none; border-radius: 0; } /*********** スライド送りボタン ***********/ /* 共有パーツ */ .arow-wrap { position: fixed; inset: 0; margin: auto; width: 90%; height: 100%; margin-top: -123px;/*無理矢理高さ合わせている*/ display: flex; justify-content: space-between; align-items: center; } .arrow-btn { width: 48px; height: 48px; background-color: #336666; border-radius: 50%; transition: .2s; } /* 左 */ .arrow-left { position: relative } /* ボタン左の中身(三角を擬似要素で表現) */ .arrow-left:before { content: ""; width: 10px; height: 10px; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; transform: translate(-30%, -50%)rotate(-45deg); } /* 右 */ .arrow-right { position: relative } /* ボタン右の中身(三角を擬似要素で表現) */ .arrow-right:before { content: ""; width: 10px; height: 10px; border-top: 2px solid #fefefe; border-left: 2px solid #fefefe; position: absolute; top: 50%; left: 50%; transform: translate(-70%, -50%)rotate(135deg); }

試したこと

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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

JavaScript

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