This is code for image slider with little bit text on image. This code showing images in a rows. But I want to make it slider. So, please help me.
<?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 }; ?>
Here, I created $isFirst
variable, what stays true until first slide has been printed. This way we can add active class for first slide and not for others.
please use default format of php. start with tag in line
<div class="item{{{ $isFirst ? ' active' : '' }}}">
and apply condition like following:
<div class="item <?php echo ($isFirst) ? ' active' : '' ; ?>">
if you are using bootstrap the html of carousal is like this :
<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>