0

スライドごとに 4 つのサムネイルを表示するカルーセルを作成しました。2 つのスライドがあります。 

<div class="container">
    <div class="row">
        <div class="carousel slide span8" id="myCarousel">
            <div class="carousel-inner">
              <div class="item active">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                    </ul>
              </div>
              <div class="item">
                    <ul class="thumbnails">
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <li class="span2">
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                    </ul>

    </div>
</div>
                                <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹&lt;/a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›&lt;/a>
        </div>
    </div>

これらのスライドには、codeigniter を使用してデータベースから画像が取り込まれます。問題は、6 ～ 7 枚のスライドを作成したいが、すべて手動で作成したくない場合、コードでどのように処理すればよいかということです。左矢印をクリックすると、新しい画像セットが読み込まれます。

4

2 に答える 2

1

すべての画像の共通点を見つけます。つまり、このコード スニペットは次のようになります。

<li class="span2">
  <div class="thumbnail">
    <img src="IMAGE_URL" alt="">
  </div>
</li>

これは標準であり、画像ごとに変更されないため、foreach ループで印刷できます。データベースから画像の URL を配列にクエリし、html 内で foreach ループを実行します。

<div class="carousel-inner">
  <div class="item active">
        <ul class="thumbnails">
          <?php foreach($image_url as $image) { ?>
             <li class="span2">
               <div class="thumbnail">
                 <img src="<?php echo $image; ?>" alt="">
               </div>
             </li>
          <?php } ?>          
        </ul>
  </div>
于 2013-03-15T04:57:44.487 に答える