Twitter Bootstrap のデフォルトの JavaScript と CSS を使用するカルーセルを作成しようとしていますが、画像は MySQL データベースから取得する必要があります。
私がphpで動的にしようとしているカルーセルのHTMLは次のようなものです:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
私が期待しているPHPファイルの最終結果はこのようなものです
<div class="carousel-inner">
<?php renderAds(); ?>
</div>
私が書いたPHP関数は次のようなものです:
function renderAds(){
$query = queryAds();
$query_exe = mysql_query($query);
if(mysql_num_rows($query_exe) == 0){
echo '<img src="images/sampleAd.jpg" >';
}else{
$numb =1;
$flag =1;
while($fetched_data = mysql_fetch_array($query_exe)){
if($numb == 1){
if($flag == 1){
echo '<div class="active item">';
}else{
echo '<div class="item">';
}
}elseif($numb == 4){
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
echo '</div>';
$numb =0;
}else{
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}
$numb++;
$flag++;
}
echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
}
}
ここでは、twitter ブートストラップのデフォルトのカルーセルとは異なり、各スライドを 4 つの画像で作成しました。デフォルトでは 1 つのスライドに対して 1 つの画像ではなく、各スライド トランジションに 4 つの画像が含まれることを期待しています。HTMLでは機能しますが、PHP関数に置き換えると最初のスライドが機能しますが、カルーセルで次の矢印を押すとdiv全体が崩壊します。
どうすればそれを機能させることができますか?
注 : ここで、最後の画像にはクラス marginLast が含まれている必要があり、もう一方の画像には marginTop クラスと pull-left クラスが含まれている必要があります。
私がhtmlでレンダリングされることを期待しているのは次のようなものです:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
上記のように結果マークアップを表示するように PHP 関数を作成するにはどうすればよいですか?
編集:私が得る出力は次のようなものです:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="sample.com" class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!-- end carousel-inner -->
</div><!-- myCarousel -->
マークアップによると、これは機能するはずですが機能しません。デフォルトでは、スライドが1つ以上ない場合の矢印は無効にする必要がありますが、クリック可能です。