code below is long but really straight forward only require code to put forward ability to slide from first slide to last slide to that return to first slide to traverse.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
<?php
foreach($employers as $employer){
echo '<li class="orbit-slide">
<figure class="orbit-figure">
'.$this->Html->image($employer['image'], ['alt'=>'employer image',
"class"=>"orbit-image"]).'
<figcaption class="orbit-caption">'.
$employer['brief'].
$employer['name'].
$employer['desg'].
$employer['created'].'
</figcaption>
</figure>
</li>
';
}
?>
</ul>
</div>
<nav class="orbit-bullets">
<?php
$i=0;
foreach($employers as $employer){
echo '<button data-slide="'.$i.'">
<span class="show-for-sr">First slide details.</span>
<span class="show-for-sr" data-slide-active-label>Current Slide</span>
</button>';
$i++;
}
?>
</nav>
</div>
code below is to slide thumbnail images traverse from first to last and return to first as above but with thumbnails that show product slide 4-5 at one go. Below code must show 4-5 thumbnails with small text and traverse as timer and button click play a role.
<div class="ecommerce-product-slider orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<?php
foreach($sectorsandcourses as $sectorandcourse){
echo '<li class="orbit-slide">
<div class="row small-up-2 medium-up-4 large-up-5 align-center">
<div class="column">
<div class="product-card">
<div class="product-card-thumbnail">
<a href="#" class="th">'.
$this->Html->image($sectorandcourse['image'], ['alt'=>'Image for sector and courses',
'style'=>'width:100%;']).'</a>
</div>
<h2 class="product-card-title"><a href="#">'.$sectorandcourse['sectors_and_courses'].'</a></h2>
<span class="product-card-desc">Product Description</span>
<span class="product-card-price">'.$sectorandcourse['count'].'</span>
</div>
</div>
</div>
</li>';
}
?>
</ul>
<nav class="orbit-bullets">
<?php
foreach($sectorsandcourses as $sectorandcourse){
echo '
<button class=data-slide="0">
<span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span>
</button>';
}
?>
</nav>
</div>
so both are different do not get confused be kind to put forward a relation between both but not to confuse them as same since one is a full screen slide show next one is thumbnail slideshow.
vision to make : fullscreen slideshow thumbnail slide show
Orbit has been discontinued i suggest use carousel with bootstrap.