Question

这是图像滑块的代码，图像上的文字很少。此代码显示行中的图像。但我想把它变成滑块。所以，请帮帮我。

                  <?php $isFirst = true; ?>
                  <?php foreach ($summaries as $key => $Summary){  ?>
                      <div class="item{{{ $isFirst ? ' active' : '' }}}">
                        <?php
                            if($Image){ 
                          ?>
                            <?= $this->Html->image('../img/'.$Image[0]['Image']['name'],array('class' =>"img-responsive imgslider"));  ?>
                        <?php } else{ ?>
                            <?= $this->Html->image('new_dummy.png',array('class'=>'img-responsive imgslider')); ?>
                        <?php }; ?>
                        <div class="carousel-caption" style="background:rgba(0,0,0,0.5)">
                          <h3><?= $Summary['Summary']['dhalao_id']?  $Summary['Dhalao']['name'] : 'Root'; ?></h3>
                          <p>Quantity Report: <?= $Summary['Summary']['time_created'] ;?> && Time: <?= $Summary['Summary']['date_created']; ?></p>
                        </div>
                      </div>
                  <?php $isFirst = false; ?>
                  <?php }; ?>

在这里，我创建了$isFirst变量，在第一张幻灯片打印之前保持不变。这样我们就可以为第一张幻灯片添加活动类而不为其他幻灯片添加活动类。

Answer 1

请使用php的默认格式。从标记开始

 <div class="item{{{ $isFirst ? ' active' : '' }}}">

并应用以下条件：

<div class="item <?php echo ($isFirst) ? ' active' : '' ; ?>">

Answer 2

如果你使用bootstrap，carousal的html就像这样：

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

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
     <?php $isFirst = true; ?>
                      <?php foreach ($summaries as $key => $Summary){  ?>
                          <div class="item{{{ $isFirst ? ' active' : '' }}}">
                            <?php
                                if($Image){ 
                              ?>
                                <?= $this->Html->image('../img/'.$Image[0]['Image']['name'],array('class' =>"img-responsive imgslider"));  ?>
                            <?php } else{ ?>
                                <?= $this->Html->image('new_dummy.png',array('class'=>'img-responsive imgslider')); ?>
                            <?php }; ?>
                            <div class="carousel-caption" style="background:rgba(0,0,0,0.5)">
                              <h3><?= $Summary['Summary']['dhalao_id']?  $Summary['Dhalao']['name'] : 'Root'; ?></h3>
                              <p>Quantity Report: <?= $Summary['Summary']['time_created'] ;?> && Time: <?= $Summary['Summary']['date_created']; ?></p>
                            </div>
                          </div>
                      <?php $isFirst = false; ?>
                      <?php }; ?>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

forest数据在bootstrap滑块上显示行中的数据

2 个答案: