🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1330閲覧

カルーセルがスライドしない

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/12/11 09:39

編集2020/12/11 11:26

前提・実現したいこと

phpの出力結果をbootstrapのカルーセルでスライドさせたい

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

prev・nextともに反応なし

該当のソースコード

<?php require 'menu.php';?> <?php $pdo=new PDO('mysql:host=localhost;dbname=kaihatsu;charset=utf8','staff','password'); $sql=$pdo -> query('select * from product_tbl order by pr_insert_date desc'); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ホーム</title> <body> <div class="container"> <h2>新着商品</h2> <div id="carousel-card" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item px-5 active"> <div class="row"> <?php $i = 0; foreach ($sql as $row) { $pr_id=$row['pr_id']; if($i < 2){ ?> <div class="col-6"> <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card"> <img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"style="height:20rem;"alt="Card image cap"> <div class="card-body"> <p class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></p> <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p> </div> </a> </div> <?php if($i == 1){ ?> </div> </div> <?php } }else{ ?> <div class="carousel-item px-5"> <div class="row"> <div class="coll-6"> <a href="detail.php?pr_id=<?php echo $pr_id;?>" class="card"> <img class="card-img-top"src="image/<?php echo $row['pr_id']?>.jpg"style="height:20rem;"alt="Card image cap"> <div class="card-body"> <p class="card-title">商品名:<?php echo $row['pr_name'].'<br>';?></p> <p class="card-text">値段:<?php echo $row['pr_price'];?>円</p> </div> </a> </div> </div> </div> <?php } $i++; if($i > 4) { break; } } ?> </div> <a class="carousel-control-prev" href="#carousel-card" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-card" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <style> .carousel-control-next, .carousel-control-prev { width: 5%; background-color: #000; } </style> <?php require 'footer.php';?>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQueryまたはBootstrapのJSファイルのいずれか、または双方が読み込まれていないとか。

投稿2020/12/11 10:00

cerfweb

総合スコア1907

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

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

退会済みユーザー

退会済みユーザー

2020/12/11 10:25

bootstrapがうまく読み込まれてませんでした。 別の質問なんですが、これでnext・prevを押すと2つ同時にスライドされてしまうのですが、1枚ずつスライドさせるにはどう変更すればいいのでしょうか?
cerfweb

2020/12/11 11:16

.carousel-itemの中に2枚読み込まれているからですね。同時に2枚表示して1枚分ずつスライドさせたいということでしょうか。
cerfweb

2020/12/11 11:18

いつの間にか問題点が書き換えられていますね。回答が意味ないですよ、これは。
退会済みユーザー

退会済みユーザー

2020/12/11 11:24

ごめんなさい。戻して別の枠で質問しなおします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問