循環顯示圖像從db到bootstrap輪播

嘗試在codeigniter的foreach循環中顯示來自數據庫的輪播圖像。下面的代碼一次顯示所有圖像。我怎樣才能一個一個地顯示滑塊內的圖像？另外下一個和上一個按鈕不起作用？循環顯示圖像從db到bootstrap輪播

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 

    <?php $i = 1; ?> 
    <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?> 
    <div class="<?php echo $item_class; ?>">= 
     <a href="#"> 
      <?php foreach ($m->result() as $row) : 
       $Player=$row->image; 
       echo "<img src='http://opunletter.com/" . $Player . "'"; 
      ?> 
     </a> 
    </div> 
    <?php $i++; ?> 
    <?php endforeach; ?> 

    </div> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 

</div><!-- /.carousel -->

來源

2015-11-28 shank

您的訂購清單應該與您在其下面構建div的方式相同，因爲它從0開始;你的櫃檯也應該從零開始。 – ahmad

<?php 
$i = 1; 
foreach ($m->result() as $row) { 
    $Player  = $row->image; 
    $item_class = ($i == 1) ? 'item active' : 'item'; 
?> 
<div class="<?php echo $item_class; ?>"> 
    <a href="#"> 
     <img src="http://opunletter.com/<?php echo $Player; ?>" /> 
    </a> 
</div> 
<?php 
    $i++; 
} 
?>

你需要保持內環路div.item用於封閉到每一個人的形象。

來源

2016-01-16 19:54:12 ameenulla0007

請訪問http://opunletter.com/ ....圖像不顯示 – shank

<!-- Wrapper for slides --> 
<div class="carousel-inner" role="listbox"> 

    <div class="item active"> 
    <img class="img-rounded img-responsive mainpic" src='<%#"/ProfilePictures/" +Eval("ProfilePicture") %>' alt='<%#Eval("Username") %>' onerror="this.src='/images/default-image.png'" style="width: 100%; height: 100%; max-width:512px;max-height:512px;"> 
    <div class="carousel-caption"> 
     <h3><%#Eval("Username") %></h3> 
     <p>'<%#Eval("Mobile") %>'</p> 
    </div> 
    </div> 


    **<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource2"><ItemTemplate>** 

    <div class="item"> 
    <img class="img-rounded img-responsive mainpic" id="po" runat="server" src='<%#Eval("Picture") %>' onerror="this.src='/images/default-image.png'" alt="" style="width: 100%; height: 100%;max-width:512px;max-height:512px;"> 
    <div class="carousel-caption"> 
     <h3><%#Eval("Productname") %></h3> 
     <p>'<%#Eval("Productdiscription") %>'</p> 
    </div> 
    </div> 


     **</ItemTemplate></asp:Repeater>**

我只是做了一個asp.net應用程序，我沒有改變任何地方的任何東西，它的工作原理。我沒有在有序名單上下功夫，因爲我不需要。不像看起來那麼複雜。

來源

2017-09-05 10:00:33

循環顯示圖像從db到bootstrap輪播

回答

相關問題