Код
, приведенный ниже, длинный, но на самом деле прямой код требует только кода, чтобы выдвинуть возможность перехода от первого слайда к последнему слайду к этому возврату к первому слайду для перемещения. Код
<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>
, приведенный ниже, предназначен для перемещения миниатюрных изображений с первого до последнего и возврата к первому, как указано выше, но с миниатюрами, которые показывают слайд продукта 4-5 на одном go. Ниже код должен показывать 4-5 миниатюр с небольшим текстом и ходом, когда таймер и нажатие кнопки играют роль.
<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>
, так что оба они разные, не запутайтесь, будьте добры, выдвиньте связь между обоими, но не путайте их как одно и то же, так как одно - полноэкранное слайд-шоу, следующее - слайд-шоу в виде миниатюр.
видение для создания: полноэкранное слайд-шоу миниатюра слайд-шоу